Next.js

Next.jsとは

Next.js は、[[React]] をベースにしたフルスタックフレームワークです。React 自体は「画面を作るライブラリ」であり、ルーティングやサーバー側の処理は含みません。Next.js はそこにサーバーサイドレンダリング(SSR)・ファイルベースルーティング・API作成機能などを加え、「React でWebアプリを作るための一式」を提供します。Vercel 社が開発しています。

レンダリング方式を選べる

Next.js の最大の特徴は、ページごとにHTMLをいつ・どこで生成するかを選べることです。

方式	HTMLを作るタイミング	向いているページ
SSR(サーバーサイドレンダリング)	リクエストのたびにサーバーで生成	最新データを表示するページ
SSG(静的サイト生成)	ビルド時に生成して配信	ブログ・ドキュメントなど更新頻度が低いページ
CSR(クライアントサイドレンダリング)	ブラウザ上でJSが生成	ログイン後の管理画面など

[[SPAとMPA]] で触れたとおり、SPA は「最初のHTMLがほぼ空」なため初回表示と SEO に弱点があります。SSR や SSG はサーバー側で中身の詰まったHTMLを作って返すため、この弱点を解消できます([[SEOの技術基礎]] 参照)。

ファイルベースルーティング

Next.js では、フォルダとファイルの配置がそのままURLになります。

app/
  page.tsx          → /
  about/page.tsx    → /about
  blog/[id]/page.tsx → /blog/123 (動的ルート)

ルーティング設定を別途書く必要がなく、プロジェクトの構造を見ればURL構成がわかります。

初学者向けポイント

Next.js のサーバー側の処理は [[Node.js]] 上で動きます。フロントとサーバーを同じ言語(JS/TS)で書けるのが利点です
画像の自動最適化やコード分割など、[[Webパフォーマンス最適化]] の定番手法が組み込みで提供されます
まず React の基礎(コンポーネント・props・state)を理解してから取り組むと、Next.js が「何を足してくれているのか」が明確になります

関連技術とのつながり

[[React]] — Next.js の土台となるUIライブラリ
[[SPAとMPA]] — SSR は SPA の弱点を補うアプローチ
[[SEOの技術基礎]] — SSR/SSG が検索エンジン対策に効く理由
[[Node.js]] — サーバー側の実行環境
[[Webパフォーマンス最適化]] — 画像最適化やコード分割が組み込み

Q: Next.jsとReactの関係として正しいのはどれ?
- [x] Next.jsはReactにSSRやルーティングなどを加えたフレームワーク
- [ ] Next.jsはReactを置き換える別言語
- [ ] ReactはNext.jsの一機能として開発された
解説: Reactは画面を作るライブラリで、Next.jsはそれをベースにSSR・ルーティング・API機能などを加えたフルスタックフレームワークです。

Q: SSG(静的サイト生成)がHTMLを生成するタイミングはどれ?
- [ ] リクエストのたびにサーバーで生成する
- [x] ビルド時に生成しておき、それを配信する
- [ ] ブラウザ上でJavaScriptが生成する
解説: SSGはビルド時にHTMLを作っておく方式で、ブログやドキュメントなど更新頻度の低いページに向きます。

Q: Next.jsのファイルベースルーティングの説明として正しいのはどれ?
- [ ] データベースにURLの一覧を登録する
- [ ] 設定ファイルにすべてのURLを手書きする
- [x] フォルダとファイルの配置がそのままURLになる
解説: app/about/page.tsx が /about になるように、ファイル構成がURL構成に対応します。