🐈‍⬛

【Next.js 16入門②】Router システム徹底解説（最後にクイズ付き！）

に公開
Next.js
React
初心者
frontend
tech

メタディスクリプション

本記事は、Next.js 16 入門シリーズ第 2 回の記事です。
Next.js の 2 つの Router システム（Pages Router / App Router）の考え方、使い方、具体的な構造例と詳細比較をわかりやすく整理。どちらを選ぶべきかの判断軸も提示します（最後にクイズ付き）。

はじめに

Next.js のルーティングは、ファイル/ディレクトリ構造に基づく「直感的な仕組み」が魅力です。
現在は 2 系統が併存しており、それぞれ設計思想や機能が異なります。

Router システム：Pages Router と App Router

Next.js には 2 つの Router システムが存在します。

📁 Pages Router（Next.js 13 以前）

特徴：

  • /pages フォルダに置いたファイルがそのままルートになる
  • 単純明快な構造で学習コストが低い
  • 長年の実績があり、既存プロジェクトでも多用

構造例：

pages/
├── index.js        → /
├── about.js        → /about
└── blog/
    ├── index.js    → /blog
    └── [id].js     → /blog/:id （動的ルート）

🚀 App Router（Next.js 13 以降・推奨）

特徴：

  • /app ディレクトリベースで、ディレクトリ＝ルートの最小単位
  • page.js（ページ）と layout.js（レイアウト）で構成
  • ネストレイアウト、並行レンダリング、サーバーコンポーネントに対応
  • 公式が推奨する新アーキテクチャ

構造例：

app/
├── page.js         → /
├── about/
│   └── page.js     → /about
└── blog/
    ├── page.js     → /blog
    └── [id]/
        └── page.js → /blog/:id （動的ルート）

🔍 詳細比較：Pages Router vs App Router

項目 Pages Router App Router
実装時期 Next.js 初期から Next.js 13 以降
配置場所 /pages /app
ルート定義 ファイル＝ルート ディレクトリ＋page.js
レイアウト 基本なし（各ページで個別対応） layout.js による階層レイアウト
動的ルート [param].js [param]/page.js（ディレクトリ単位）
サーバーコンポーネント 非対応 対応
並行レンダリング 非対応 対応
学習コスト 低い 中程度
公式推奨 新規では非推奨（既存は継続可） 推奨

どちらを選ぶべきか？判断の指針

  • 新規開発：App Router を推奨
    • レイアウトの再利用、サーバーコンポーネント、並行レンダリングなど、長期的に有利
  • 既存の Pages Router プロジェクト：現行のまま継続可能
    • コストを抑えつつ、段階的な移行を検討
  • シンプルな静的ページ中心のサイト：Pages Router でも十分対応可能

ポイントは、将来の拡張性（レイアウトの入れ子、データ取得の在り方、コンポーネント分離）をどれだけ重視するかです。

まとめ

  • Next.js には Pages Router と App Router の 2 系統がある
  • 新規は App Router が基本。既存の Pages Router は無理なく継続で OK
  • レイアウト設計・動的ルート表現・コンポーネント戦略で App Router の優位が際立つ

📝クイズコーナー：理解度チェック

Pages Router と App Router の共通点と相違点を説明してください。

【共通点】

  • どちらも Next.js の「ファイル（/ディレクトリ）ベース・ルーティング」を採用し、設定ファイルなしでルートが自動生成される。
  • 動的ルートをサポートし、URL パラメータに応じたページを構築できる。
  • フレームワークのレンダリング機構（SSR/SSG/ISR または Static/Dynamic）と組み合わせて、SEO とパフォーマンス最適化を実現できる。
  • ルーティングの基本思想（URL とファイル配置の対応）は共通で、習得知識を相互に活かせる。

【相違点（要点別）】

  • 配置場所:
    • Pages Router: /pages
    • App Router: /app
  • ルート定義:
    • Pages: 「ファイル＝ルート」例）pages/about.js → /about
    • App: 「ディレクトリ＋ page.js」例）app/about/page.js → /about
  • 動的ルート表現:
    • Pages: pages/[id].js
    • App: app/[id]/page.js（ディレクトリでパラメータを表現）
  • レイアウト設計:
    • Pages: 明示的な標準レイアウト機構は基本なし（各ページ実装で対応）
    • App: layout.js により階層的・再利用可能なレイアウトが標準化
  • サーバーコンポーネント / 並行レンダリング:
    • Pages: 非対応
    • App: 対応（Server Components / 並行レンダリングが前提設計）
  • 適用シーン / 推奨:
    • 新規開発は App Router 推奨（レイアウト再利用・サーバーコンポーネント・将来性）
    • 既存の Pages Router は無理な移行不要（必要に応じ段階的移行を検討）
    • 単純な静的構成中心なら Pages でも十分

【面接向けまとめ（結論）】

  • 「Pages Router は /pages の“ファイル＝ルート”でシンプル、App Router は /app の“ディレクトリ＋ page.js/layout.js”でレイアウト再利用やサーバーコンポーネント、並行レンダリングが強み。新規は App Router を基本選択、既存は Pages Router 継続で OK。要件（レイアウトの複雑さ、動的性、将来拡張）で判断する。」

🔗 参考情報

前回/次回

Discussion