先生と生徒の会話形式で理解しよう

生徒

「Next.jsを調べていたら、App RouterとPages Routerって言葉が出てきました。これは何が違うんですか？」

先生

「どちらもNext.jsでページを作るための仕組みですが、役割と考え方が違います。」

生徒

「パソコン操作も苦手なので、できるだけ簡単に知りたいです。」

先生

「では、Pages RouterとApp Routerを比べながら、やさしく説明していきます。」

1. Next.jsのRouterとは何か

Routerとは、URLと画面を結びつける仕組みのことです。 URLとは、ブラウザの上に表示されるWebサイトの住所のようなものです。

Routerは「この住所にアクセスされたら、この画面を表示する」という案内役です。 Next.jsでは、この案内役の仕組みとしてPages RouterとApp Routerがあります。

2. Pages Routerの役割と特徴

Pages Routerは、昔からあるNext.jsのページ管理方法です。 pagesフォルダの中にファイルを置くだけでページが作れます。

これは、ノートにページ番号を書くだけで内容が決まるような感覚です。初心者でも直感的に理解しやすいのが特徴です。


export default function Home() {
  return <h1>Pages Routerのページ</h1>;
}

（pagesフォルダのトップページとして文字が表示されます）

3. Pages Routerが向いているケース

Pages Routerは、シンプルなWebサイトや小規模なWebアプリに向いています。ページの数が少ない場合、構造が分かりやすく管理しやすいです。

ただし、共通のレイアウトや複雑な画面構成を作ると、同じコードを書く場面が増えます。

4. App Routerの役割と特徴

App Routerは、Next.js 13以降で登場した新しいページ管理方法です。 appフォルダを使い、ページやレイアウトを分けて管理します。

これは、家を建てる前に設計図を作るような考え方です。全体構造を先に決めてから、各部屋を作ります。


export default function Page() {
  return <p>App Routerのページ</p>;
}

（appフォルダのページとして文字が表示されます）

5. App Routerの重要な仕組み「レイアウト」

App Routerでは、layoutという仕組みが重要です。レイアウトは、すべてのページで共通して使う枠のことです。

ヘッダーやメニューを一度書くだけで、すべてのページに反映できます。


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>共通ヘッダー</header>
        {children}
      </body>
    </html>
  );
}

（どのページにも共通ヘッダーが表示されます）

6. App Routerでできる新しい考え方

App Routerでは、画面表示の準備をサーバー側で行う考え方が基本です。サーバーとは、Webサイトの裏側で動くコンピュータです。

これにより、画面表示が速くなり、利用者の待ち時間が減ります。


export default async function Page() {
  return <div>サーバーで準備された画面</div>;
}

（準備された内容がすぐに表示されます）

7. Pages RouterとApp Routerの役割の違い

Pages Routerは「ページ単位で作る」考え方です。 App Routerは「構造を意識して作る」考え方です。

Pages Routerは分かりやすさ重視、App Routerは拡張性と整理しやすさ重視と言えます。

8. 初心者が混乱しないための考え方

初心者の方は、Pages RouterとApp Routerが別物だと知るだけで十分です。記事や解説で出てくる用語の意味が理解しやすくなります。

Next.jsの基本概念として、ページを管理する方法が2つあることを覚えておきましょう。

まとめ

Next.jsにおけるApp RouterとPages Routerの役割や違いについて詳しく解説してきましたが、いかがでしたでしょうか。これまでの内容を振り返ると、Next.jsは単なるフレームワークの枠を超え、現代のWeb開発において欠かせない強力なツールへと進化を遂げていることが分かります。

かつての主流であったPages Routerは、直感的なファイルベースルーティングを提供し、初心者でも学習コストを抑えてプロジェクトを開始できるという大きなメリットがありました。しかし、Webアプリケーションが複雑化し、より高度なユーザー体験やパフォーマンスが求められる中で、新しい標準として登場したのがApp Routerです。

App Routerの最大の特徴は、React Server Components（RSC）をベースとした設計にあります。これにより、サーバー側でデータを取得し、必要な部分だけをクライアントに送るという効率的なレンダリングが可能になりました。特に「Layouts」機能による共通部品の管理や、「Loading UI」「Error Handling」といったユーザー体験を向上させるための仕組みが標準で備わっている点は、開発者にとって非常に魅力的なポイントです。

App Routerでのコンポーネント設計の実例

App Routerを活用する際、クライアント側での動作が必要な場合は「use client」宣言を使用します。以下に、フォーム入力を管理するシンプルなコンポーネントの例を示します。


"use client";

import React, { useState } from "react";

export default function ContactForm() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`送信された名前: ${name}`);
  };

  return (
    <div className="p-4 border rounded">
      <h3>お問い合わせフォーム</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="お名前を入力してください"
          className="border p-2 mr-2"
        />
        <button type="submit" className="bg-blue-500 text-white p-2 rounded">
          送信
        </button>
      </form>
    </div>
  );
}

（入力欄にお名前を入力して送信ボタンを押すと、入力した名前がアラートで表示されます）

Pages Routerとの構造的な比較

Pages Routerでは、APIルートの作成も特定のディレクトリ（pages/api）に限定されていましたが、App Routerでは「Route Handlers」として各ディレクトリに柔軟に配置できるようになりました。これにより、関連するロジックを同じ場所にまとめる「コロケーション」が実現し、プロジェクトの保守性が飛躍的に向上します。

また、最新のSEO対策という観点においても、App Routerの「Metadata API」は非常に強力です。静的なメタデータだけでなく、動的なデータに基づいたメタデータを簡単に生成できるため、検索エンジンに対してより適切な情報を伝えることができます。

今後の学習の進め方について

これからNext.jsを本格的に学びたいと考えている方は、まずはApp Routerを中心に学習を進めることを強くおすすめします。現在の開発現場ではApp Routerが主流になりつつあり、最新のドキュメントやライブラリもApp Routerへの最適化が進んでいます。

もちろん、既存のプロジェクトや古い教材ではPages Routerが使われていることも多いため、両者の違いを概念として知っておくことは、トラブルシューティングの際にも大いに役立つはずです。ディレクトリ構造の違いや、getServerSidePropsといった関数の役割がどのように変わったのかを比較しながら学ぶことで、より深い理解が得られるでしょう。

今回の内容が、皆様のWebサイト制作やWebアプリケーション開発の第一歩を後押しするヒントになれば幸いです。Next.jsは常に進化し続けていますが、その根底にある「最高のユーザー体験を提供する」という目的は変わりません。新しい技術を楽しみながら、一歩ずつ自分のものにしていきましょう。

先生と生徒の振り返り会話

生徒

「先生、ありがとうございました！まとめを読んで、App Routerの方がこれからのWeb制作では重要なんだということがよく分かりました。」

先生

「そうですね。特にApp Routerの『サーバーコンポーネント』という考え方は、最初は少し戸惑うかもしれませんが、慣れてくると表示速度が格段に速くなるメリットを実感できるはずですよ。」

生徒

「たしかに、さっきのサンプルコードでも『use client』って書いてあるのを見て、役割分担をしているんだなと気づけました。これって、SEOにも有利なんですよね？」

先生

「その通りです。サーバー側でHTMLをしっかり生成してからブラウザに届けるので、検索エンジンが内容を読み取りやすくなります。これが検索結果の上位表示に繋がる大事な要素なんです。」

生徒

「なるほど！だからみんなApp Routerを使おうとしているんですね。ディレクトリの構造も、最初は複雑に見えたけど、役割ごとに整理できると考えれば使いやすそうです。」