Next.jsのPages RouterとApp Routerの違いを完全ガイド！初心者でもわかる宣言的ルーティングと自動ルーティング
生徒
「Next.jsにはPages RouterとApp Routerがあるって聞いたんですが、何が違うんですか？」
先生
「どちらもページの移動を管理する仕組みですが、考え方と書き方が大きく違います。」
生徒
「宣言的とか自動ルーティングって言葉が難しくて…」
先生
「では、まず身近なたとえから順番に説明していきましょう。」
1. Next.jsのRouterとは何かを知ろう
Next.js（ネクスト ジェイエス）におけるRouter（ルーター）とは、URL（ユーアールエル）と画面を結びつける仕組みです。 インターネットでは、URLを入力すると特定のページが表示されますが、その対応関係を管理しているのがRouterです。
初心者の方は「住所録」を想像してください。 住所（URL）を書くと、対応する家（ページ）にたどり着けます。 Next.jsでは、この住所録の作り方にPages RouterとApp Routerの2種類があります。
2. Pages Routerとは？自動ルーティングの仕組み
Pages Router（ページズ ルーター）は、昔から使われているNext.jsの基本的な仕組みです。 特徴は「自動ルーティング」です。
pagesフォルダの中にファイルを置くだけで、URLが自動的に決まります。 ファイル名＝URLになるため、初心者でも直感的に理解しやすいのが特徴です。
export default function Home() {
return <h1>トップページです</h1>;
}
3. App Routerとは？宣言的ルーティングの考え方
App Router（アップ ルーター）は、新しく登場した仕組みです。 最大の特徴は「宣言的（せんげんてき）ルーティング」です。
宣言的とは、「こういう構造の画面ですよ」とフォルダ構成で宣言する考え方です。 自動で決まるというより、画面の役割を明確に分けて設計します。
export default function Page() {
return <h1>Aboutページです</h1>;
}
4. 自動ルーティングと宣言的ルーティングの違いを例で理解
Pages Routerの自動ルーティングは、「置いたら勝手に決まる」方式です。 一方、App Routerの宣言的ルーティングは、「役割を決めてから配置する」方式です。
たとえるなら、Pages Routerは本棚に本を並べるだけで分類される仕組みです。 App Routerは、最初に「小説」「参考書」と棚を分けてから本を置くイメージです。
5. レイアウト管理の違い（Pages RouterとApp Router）
Pages Routerでは、共通レイアウトを作るには_app.jsを使います。 少し理解が難しく、初心者がつまずきやすいポイントです。
export default function MyApp({ Component, pageProps }) {
return (
<div>
<header>共通ヘッダー</header>
<Component {...pageProps} />
</div>
);
}
App Routerではlayout.jsを使い、フォルダ単位でレイアウトを管理できます。 見た目の構造がフォルダで分かるため、理解しやすくなっています。
export default function Layout({ children }) {
return (
<div>
<header>共通ヘッダー</header>
{children}
</div>
);
}
6. 初心者が混乱しやすいポイント
初心者が混乱しやすいのは、「どちらを使えばいいのか」という点です。 Pages Routerはシンプルで理解しやすく、学習用に向いています。
App Routerは構造がはっきりしており、大きなアプリでも管理しやすいですが、 最初はフォルダの役割を理解する必要があります。
7. Pages RouterとApp Routerの考え方の違いまとめ
Pages Routerは「ファイル名でページを作る」考え方です。 App Routerは「画面構造を宣言して作る」考え方です。
どちらもNext.jsの重要な機能であり、違いを知ることで理解が一気に深まります。 まずは仕組みの違いを知ることが大切です。
