App Router と Pages Router の違いは何ですか？

Question

IT Interview Practice · Accepted Answer

Next.js には **2つのルーティングシステム** があります。**Pages Router**（`pages/`）は元のもの、**App Router**（`app/`、Next 13以降）は、React Server Components を中心に構築された新しい推奨システムです。 ## ファイルと規約の違い ```text Pages Router (pages/) App Router (app/) ────────────────────────────────────────────────────── pages/about.tsx → /about app/about/page.tsx → /about Default export = page page.tsx = page, layout.tsx = layout getServerSideProps (SSR) async Server Components (fetch directly) getStaticProps (SSG) fetch() with caching options _app.tsx / _document.tsx Nested layout.tsx files All components client-rendered Server Components by default ``` ## 主な概念の転換：Server Components ```tsx // App Router — a Server Component that fetches data directly, no extra API // app/users/page.tsx export default async function Users() { const res = await fetch("https://api.example.com/users"); // runs on the SERVER const users = await res.json(); return

{u.name}

; } ``` App Router では、コンポーネントは **デフォルトで Server Components** です。サーバー上で実行され、データを直接 `await` でき、そのコンポーネントのブラウザへの JS 送信はゼロです。Pages Router では、代わりに特別な関数（`getServerSideProps`）を使用してデータをクライアントレンダリングページに渡していました。 ## App Router が追加するもの - **ネストされたレイアウト** がナビゲーション全体で永続化（`layout.tsx`）。 - **Server Components**（クライアント JS の削減、直接的なデータアクセス）。 - `loading.tsx` / Suspense による **ストリーミング**。 - API ルートなしでのミューテーション用の **Server Actions**。 ## どちらを使うか新しいプロジェクトには **App Router** を使用してください。Next.js 開発の焦点はここにあります。Pages Router はまだサポートされています（2つは 1 つのアプリ内で共存可能）が、本質的にはメンテナンスモードです。 ## なぜ重要なのか App Router は Next.js の現在のアーキテクチャ（Server Components、ネストされたレイアウト、ストリーミング）を表しています。レガシー Pages Router との違い方を知ること、特にサーバー優先のデフォルトとレイアウトモデルは、最新の Next.js コードベースで作業するために不可欠です。

ファイルと規約の違い

主な概念の転換：Server Components

App Router が追加するもの

どちらを使うか

なぜ重要なのか

関連する質問