Dev Solve

Next.js App RouterとPages Routerの違い

問題の背景

Next.js公式ドキュメントで紹介されているApp RouterとPages Routerの違いについて混乱する開発者が多いです。主な疑問点は以下のとおりです：

両者の本質的な技術的差異
パフォーマンスとユーザビリティの観点での比較
実際のプロジェクトでの適切な選択基準

主要な技術的差異

両ルーターの根本的な違いを比較した表は次の通りです：

特徴	App Router	Pages Router
ルーティング方式	ネストフォルダ構造	ファイル直結方式
コンポーネント	デフォルトでServer Components	デフォルトでClient Components
データ取得	`fetch`関数	`getServerSideProps`/`getStaticProps`
レイアウト	ネスト可能で動的	静的
ルーティング優先度	高い（同一プロジェクトで共存時）	低い（App Routerが優先）
サーバーコンポーネント	◎ 完全サポート	× 未対応
ストリーミング	◎ サポート	△ 制限あり

階層構造の違い

txt

// App Routerの構造
app/
  ├ dashboard/
  │  ├ page.tsx  // /dashboard
  │  └ settings/
  │     └ page.tsx  // /dashboard/settings
  └ page.tsx      // ルートページ

// Pages Routerの構造
pages/
  ├ dashboard.tsx    // /dashboard
  └ dashboard/
     └ settings.tsx  // /dashboard/settings

パフォーマンスとユーザビリティ比較

✅ App Routerの優位点

初期ロード速度
サーバーコンポーネントによりクライアントサイドのJSバンドルサイズが削減

動的レイアウト

tsx

// ユーザー認証状態に応じてレイアウト変更
export default function Layout({ user }) {
  return user ? <DashboardLayout /> : <PublicLayout />;
}

データ取得の効率化
従来のgetServerSidePropsよりも宣言的なデータフェッチが可能：

tsx

async function UserData() {
  const data = await fetch('https://api.example.com/user');
  return <Profile data={data} />;
}

⚠️ Pages Routerの活用ケース

移行中のプロジェクト
既存プロジェクトを段階的に移行する際の暫定手段
シンプルな静的サイト
ブログなど複雑なルーティングが不要なケース

重要な注意点

App RouterとPages Routerは同一プロジェクトで共存可能ですが：

/appディレクトリが存在する場合、App Routerが優先されます
混在時の予期せぬ挙動を避けるため、新規プロジェクトでは一貫した選択を推奨

ベストプラクティスと実践例

推奨ユースケース

シナリオ	推奨ルーター	理由
新規プロジェクト	◎ App Router	最新機能のフル活用
大規模アプリケーション	◎ App Router	動的レイアウトによる拡張性
SEO要件が厳しいサイト	◯ 両者可能	どちらもSSR/SSG対応
単純なLPサイト	△ Pages Router	学習コストの低さ

パフォーマンス実測データ

Next.jsルーター比較グラフ

↑ Vercel公式ベンチマークより（2024年測定）

LCP (Largest Contentful Paint)
App Router：平均 1.2s
Pages Router：平均 1.8s
JSバンドルサイズ
App Router：最大40%削減（サーバーコンポーネント利用時）

意思決定フローチャート

移行に関するアドバイス

インクリメンタル移行
/appディレクトリを追加し、部分的な移行から開始可能

共通の問題点

bash

# 頻出エラー対処
Error: Invariant: getStaticProps is not supported in app/

→ generateStaticParamsへの置き換えが必要

公式リファレンス

最新情報は常に公式ドキュメントで確認してください：

bash

npx @next/codemod create-next-app@latest

移行ツールを提供

結論

2024年現在のベストプラクティス：

新規プロジェクトにはApp Routerを推奨
サーバーコンポーネント・ストリーミングなどモダンな機能を活用可能
Pages Routerは以下に有効：
- 学習目的の小規模プロジェクト
- 既存プロジェクトのマイグレーション中段階
パフォーマンス差
複雑なアプリではApp Routerが明確な優位性（特にLCP向上）

Next.jsチームはApp Routerをフレームワークの将来と位置付けており、長期的な互換性保証はありません。新規プロジェクトではApp Routerの採用が安全な選択です。

関連記事

Next.js App RouterとPages Routerの違い ​

問題の背景 ​

主要な技術的差異 ​

パフォーマンスとユーザビリティ比較 ​

✅ App Routerの優位点 ​

⚠️ Pages Routerの活用ケース ​

ベストプラクティスと実践例 ​

推奨ユースケース ​

パフォーマンス実測データ ​

意思決定フローチャート ​

移行に関するアドバイス ​

結論 ​