Next.js を採用する理由

Next.jsは、Reactを使ってWebサイトやWebアプリケーションを作るためのフレームワークです。画面をサーバー側であらかじめ組み立てて配信する仕組み、ページごとのURL設計、画像やフォントの最適化など、Reactだけでは自分で用意する必要があった部分をまとめて提供します。サーバー側で動く処理とブラウザ側で動く処理を同じプロジェクトの中で書き分けられるため、表示速度と開発のしやすさを両立しやすいのが特徴です。オープンソースで公開されており、レスポンシブデザインのWebサイトから、ログインが必要な業務システムの画面まで幅広く使われています。

弊社では、Webサイトの制作と、業務システムの管理画面や利用者向け画面の開発でNext.jsを採用しています。App Routerと呼ばれる構成を基本にしており、ページの骨組みをサーバー側で組み立ててから配信できるため、表示が速く、検索エンジンにも内容が正しく伝わります。この会社サイト自体もNext.jsで構築しています。業務システムでは、Laravelなどで作ったAPIと組み合わせ、画面側をNext.jsで作る構成を多く採っています。画面とサーバーの役割をはっきり分けられるため、どちらか一方だけを改修しやすく、将来の引き継ぎもしやすくなります。ホスティングにはVercelやAWSを用途に応じて選んでおり、フルスタックエンジニアが画面からサーバー構成まで一貫して担当できる点も採用理由のひとつです。

Next.jsは新しいバージョンの公開が比較的早く、大きな更新では画面の組み立て方やデータ取得の作法が変わることがあります。更新の際は公式のアップグレードガイドと自動変換ツールを活用し、ステージング環境で表示と動作を確認してから本番に反映します。ReactやNode.jsといった土台の更新とも連動するため、依存関係をまとめて棚卸しする時期を決めておくと安全です。画面の見た目を検証する自動テストを整備しておくと、更新時の確認作業を減らせます。