Next.jsのPage RouterとApp Routerの違いを解説 #Next.js

Next.jsはReactをベースにしたフレームワークで、効率的な開発をサポートするために多くの機能を提供しています。
その中でもルーティングは重要な機能の一つです。
Next.jsには大きく分けてPage RouterとApp Routerの二つのルーティング方法が存在します。
本記事ではそれぞれの特徴と使い方について詳しく解説し、例も交えて説明します。

Page Routerとは？

Page RouterはNext.jsの初期バージョンから存在する、ファイルベースのルーティング方法です。

特徴

ファイルベースのルーティング:
- pagesディレクトリ内にファイルを配置することで、自動的にルートが生成されます。
- 例えば、pages/about.jsを作成すると、/aboutというルートが自動的に設定されます。
シンプルなルーティング:
- 特定のURLに対するページの作成が簡単で、特に設定ファイルを必要としません。
- 動的ルーティングもファイル名に[id].jsのように書くことで実現します。
限定された柔軟性:
- 基本的なルーティング機能には十分ですが、複雑なルーティングロジックを持つアプリケーションには制限があります。

例

静的ルーティング:

// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

動的ルーティング:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}

App Routerとは？

App RouterはNext.jsの新しいバージョンから導入された、プログラム的ルーティング方法です。より柔軟で高度なルーティングが可能です。

特徴

プログラム的ルーティング:
- コードでルートを定義するため、柔軟なルーティングが可能です。
- next/routerモジュールを使用してルーティングを制御します。
動的ルーティングの柔軟性:
- 動的にルートを生成したり、条件に基づいてルートを切り替えたりすることが容易です。
- 例えば、クエリパラメータや状態に基づいてルートを変更することができます。
複雑なアプリケーション向け:
- 大規模なアプリケーションや複雑なルーティングロジックが必要な場合に適しています。
- カスタムミドルウェアやルートガードなど、高度なルーティング機能を実装可能です。

ディレクトリ構成

App Routerでは、特定のディレクトリ構造を守る必要があります。通常、appディレクトリ内にコンポーネントやルートを定義し、各ディレクトリにはpage.jsxまたはpage.jsファイルが含まれます。このファイルが実際のページコンポーネントとなります。

ディレクトリ構成例:

my-next-app/
├── app/
│   ├── layout.js
│   ├── page.jsx
│   ├── about/
│   │   └── page.jsx
│   ├── dashboard/
│   │   ├── layout.js
│   │   └── page.jsx
│   └── posts/
│       ├── [id]/
│       │   └── page.jsx
│       └── page.jsx
├── public/
├── styles/
├── next.config.js
└── package.json

例

基本ページコンポーネント:

// app/page.jsx
export default function HomePage() {
  return <h1>Home Page</h1>;
}

ネストされたページとレイアウト:

// app/about/page.jsx
export default function AboutPage() {
  return <h1>About Page</h1>;
}

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <nav>Dashboard Navigation</nav>
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/page.jsx
export default function DashboardPage() {
  return <h1>Dashboard Page</h1>;
}

動的ルーティング:

// app/posts/[id]/page.jsx
import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}

まとめ

Next.jsのPage RouterとApp Routerは、それぞれ異なる利点を持っています。アプリケーションの規模や要件に応じて、適切なルーティング方法を選択することが重要です。

Page Router: シンプルで直感的。小規模アプリケーションや静的ページに最適。
App Router: 高度なルーティングが可能。大規模で複雑なアプリケーションに適しています。

ディレクトリ構成の違いや使い方を理解し、自分のプロジェクトに最適なルーティング方法を見つけて、Next.jsでの開発をさらにスムーズに進めましょう。