Next.jsにおけるApp RouterとPages Routerの違いと使い方〜徹底解説〜

プロコム開発チーム

はじめに

Next.jsはReactベースのフレームワークとして、Webアプリケーションの開発をより効率的かつ柔軟に行えるよう設計されています。その中でも大きな特徴として挙げられるのが「ルーティング」の仕組みです。

Next.jsには従来のPages Routerと、2023年に登場した新しいApp Routerという2つのルーティング方式が存在しています。

本記事では、それぞれのルーティング方式について仕組みや利点、具体的な使い方の違いを4000文字以上のボリュームで徹底的に解説します。

1. Pages Routerとは？

1-1. 基本の仕組み

Pages RouterはNext.js初期から存在する、ファイルベースのルーティングシステムです。/pagesディレクトリに配置したファイルがそのままURLパスに対応する構造となっています。

/pages/index.tsx      →  /
/pages/about.tsx      →  /about
/pages/blog/[slug].tsx →  /blog/記事スラッグ

1-2. 特徴

シンプルで分かりやすい
getStaticProps, getServerSideProps, getInitialPropsといったデータ取得のための関数が利用可能
SSRやSSGに柔軟に対応
初心者でも学習コストが低い

1-3. 短所

コンポーネント構成が一層に依存しがち（ネスト構造の柔軟性が低い）
コード分割・レイアウト管理が手動になりがち
新機能との親和性が弱い（React Server Components非対応）

2. App Routerとは？

2-1. 基本の仕組み

App RouterはNext.js 13から導入された新しいルーティング機構です。/appディレクトリ内の構造でページを定義し、React Server ComponentsやStreaming、Layouts、Templatesといった新機能が活用できます。

/app/page.tsx           → /
/app/about/page.tsx     → /about
/app/blog/[slug]/page.tsx → /blog/記事スラッグ

2-2. 特徴

React Server Components対応（SSRとクライアントの切り分け）
layout.tsxによるレイアウト管理が可能
loading.tsx, error.tsxで柔軟なUI構成
metadata, generateStaticParams などSEO・SSG対応が標準

2-3. 短所

新しい概念が多く学習コストが高い
一部のライブラリとの互換性が課題
use clientの記述が必要な場合があり煩雑

3. Pages RouterとApp Routerの比較

機能	Pages Router	App Router
ディレクトリ	/pages	/app
ルートファイル名	`about.tsx`	`about/page.tsx`
SSR/SSG	対応	対応（異なる仕組み）
データ取得関数	getStaticProps等	fetch/ReactQuery等
Layout管理	手動	`layout.tsx`で自動
Client/Server分離	不可	明示的に可能
Streaming対応	不可	可能

4. App Routerの具体的な使い方

4-1. ページの作成

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

4-2. レイアウトファイル

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

4-3. 動的ルーティングとparams

// app/user/[uid]/page.tsx
export default function UserPage({ params }: { params: { uid: string } }) {
  return <div>ユーザーID: {params.uid}</div>;
}

4-4. SEO対策（metadata）

// app/user/[uid]/page.tsx
export const metadata = {
  title: 'ユーザーページ - Procom',
  description: 'ユーザーのSNSプロフィールをまとめて表示',
};

4-5. クライアントコンポーネントの使用

'use client';

import { useState } from 'react';

export default function LikeButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>❤️ {count}</button>;
}