Next.js App Router入門！App RouterとPages Routerの根本的な違いを初心者向けに徹底解説
生徒
「Next.jsにはApp RouterとPages Routerがあると聞いたのですが、何が違うんですか？」
先生
「Next.jsには昔から使われているPages Routerと、新しく登場したApp Routerがあります。考え方そのものが違うんですよ。」
生徒
「初心者だと、どちらを理解すればいいんでしょうか？」
先生
「まずは違いをしっかり理解することが大切です。例え話を交えながら順番に見ていきましょう。」
1. Next.jsとは何かを簡単におさらい
Next.jsは、WebサイトやWebアプリを作るためのフレームワークです。 フレームワークとは、最初から便利な道具箱が用意されている仕組みのことです。 真っ白な紙に家を建てるのではなく、基礎や柱が用意されている土地で家を建てるようなイメージです。
Next.jsはReactを土台にしており、画面を部品のように組み立てていく考え方を使います。 その中で「ページをどう作るか」「画面をどう分けるか」を決める仕組みがRouterです。
2. Pages Routerとは何か
Pages Routerは、Next.jsが最初から長く使ってきた仕組みです。 pagesフォルダの中にファイルを置くことで、自動的にページが作られます。
例えるなら、ファイル名がそのまま住所になるマンションのようなものです。 room1.jsを置けば「/room1」という住所が自動で割り当てられます。
export default function Home() {
return <h1>トップページです</h1>;
}
3. App Routerとは何か
App Routerは、Next.jsの新しい仕組みです。 appフォルダを使い、画面の構造をより細かく整理できます。
Pages Routerが「ページ単位」で考えるのに対し、 App Routerは「画面の構造」そのものを考えるイメージです。 家全体を部屋ごと、役割ごとに設計する感覚に近いです。
export default function Page() {
return <h1>App Routerのページです</h1>;
}
4. フォルダ構成の考え方の違い
Pages Routerでは「1ファイル＝1ページ」という考え方が基本です。 そのため、処理や画面が増えるとファイルが増えやすくなります。
App Routerでは、layoutやpageなど役割ごとのファイルを使います。 これにより、共通部分とページごとの部分を分けて管理できます。
export default function Layout({ children }) {
return (
<div>
<header>共通ヘッダー</header>
{children}
</div>
);
}
5. データの扱い方の根本的な違い
Pages Routerでは、データ取得のために特別な関数を使う必要がありました。 初心者にとっては、覚えることが多く混乱しやすい部分です。
App Routerでは、画面を作る流れの中で自然にデータを扱えます。 表示と処理を近い場所に書けるため、理解しやすくなっています。
async function getMessage() {
return "こんにちは";
}
export default async function Page() {
const message = await getMessage();
return <h1>{message}</h1>;
}
6. 初心者が混乱しやすいポイント
初心者がつまずきやすいのは、「なぜ新しい仕組みが必要なのか」という点です。 Pages Routerでもサイトは作れますが、規模が大きくなると管理が難しくなります。
App Routerは最初は難しく見えますが、長い目で見ると整理しやすい構造です。 最初から正しい箱に物を入れる収納のようなものです。
7. App Routerが重視している考え方
App Routerでは、「画面をどう組み立てるか」を強く意識します。 部品を組み合わせて一つの画面を作るため、修正や追加が楽になります。
この考え方は、これからのNext.js開発の中心となる考え方です。 初心者のうちから触れておくと、後で理解が深まります。
8. Pages RouterとApp Routerはどちらを使うべきか
学習目的であれば、両方の存在を知っておくことが大切です。 ただし、これから新しくNext.jsを学ぶ場合は、App Routerを中心に理解するとよいでしょう。
根本的な違いを理解することで、コードの意味や構造が見えやすくなります。 それがNext.jsを怖がらずに学ぶ第一歩になります。
