Next.jsはReactベースのフルスタックWebフレームワーク。App Router・SSR・SSG・ISRの違いと、Reactとの関係をわかりやすく解説します。
Next.js（ネクストジェイエス）とは、ReactをベースにしたフルスタックWebフレームワークです。Vercel社が開発・メンテナンスしており、SSR（サーバーサイドレンダリング）・SSG（静的サイト生成）・ファイルベースルーティング・APIルートなど、Webアプリに必要な機能をすぐに使えます。2023年のApp Router導入以降はReact Server Componentsにも対応し、フロントエンド開発の主流となっています。
| 方式 | レンダリングタイミング | 向いているケース |
|---|---|---|
| SSR | リクエスト時にサーバーで生成 | ユーザーごとに異なるデータを表示 |
| SSG | ビルド時に静的HTMLを生成 | ブログ・ランディングページ |
| ISR | 一定時間ごとに再生成 | ニュース・EC商品ページ |
| CSR | ブラウザでJSが実行されて生成 | ダッシュボード・管理画面 |
app/ディレクトリ。React Server Components対応・並列ルーティング・レイアウトネストが使える。新規開発はこちらを選択。pages/ディレクトリ。getServerSideProps・getStaticPropsを使う従来の方法。既存プロジェクトではそのまま使い続けられる。ReactはUIを構築するためのJavaScriptライブラリです。Next.jsはReactをベースとして、SSR・SSG・ファイルベースルーティング・APIルートなどWebアプリ開発に必要な機能を追加したフレームワークです。本格的なWebアプリにはNext.jsが推奨されます。
はい。AWS（EC2・ECS・Lambda）、Google Cloud Run、Azure、Netlifyなどでもデプロイ可能です。ただしVercelはNext.jsの開発元であり、Edge Functions・ISR・自動CDNなどNext.js特有の機能が最も簡単に使えます。
新規プロジェクトではApp Router（Next.js 13以降）を推奨します。React Server Components・並列ルーティング・レイアウトネストなどの新機能が使えるためです。既存のPages Routerプロジェクトは段階移行が可能です。
ITエンジニア向け転職サービス2強を並行利用するのが最も効果的です。
※どちらも完全無料。登録だけで市場価値を確認できます。