App Router のルーティング

Next.js 14 App Router の基礎
No.217
フロントエンド開発

日付：2025年2月18日

Next.js 14 の App Router におけるルーティングの仕組みを詳しく解説します。基本的なページの作成から、動的ルート、キャッチオールルート、レイアウトの適用までを説明します。

目 次

はじめに

Next.js 14 では App Router (app/ ディレクトリ) が標準となり、ルーティングの管理方法が従来の Page Router (pages/ ディレクトリ) から大きく変わりました。

本記事では、App Router のルーティングの基本から応用までを詳しく解説します。

1. 基本的なルーティング

ページの作成

App Router では、app/ ディレクトリの フォルダ構成 がそのままルーティングになります。

JSX
// app/page.js
export default function Home() {
  return <h1>ホームページ</h1>;
}
  • app/page.js → /
  • app/about/page.js → /about

フォルダと page.js の関係を意識することで、直感的にルートを作成できます。

2. 動的ルーティング

URL の一部を 動的なパラメータ にする場合は、角括弧 [param] を使う ことで対応可能です。

動的ルートの定義

JSX
// app/products/[id]/page.js
export default function ProductPage({ params }) {
  return <h1>商品ID: {params.id}</h1>;
}

アクセス例

  • /products/123 → params.id = "123"
  • /products/apple → params.id = "apple"

動的ルートを使うことで、複数のページを一つのコンポーネントで対応 できます。

3. キャッチオールルーティング

動的ルートの params に 複数のパス要素を含める には、[...param] を使います。

JSX
// app/docs/[...slug]/page.js
export default function DocsPage({ params }) {
  return <h1>ドキュメント: {params.slug.join("/")}</h1>;
}

アクセス例

  • /docs/nextjs → params.slug = ["nextjs"]
  • /docs/nextjs/routing → params.slug = ["nextjs", "routing"]

複数のネストされたパスに対応したい場合に便利です。

4. ネストレイアウトの適用

App Router では layout.js を使うことで ページ全体の共通レイアウト を定義できます。

レイアウトの作成

JSX
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <nav>ナビゲーションバー</nav>
        {children}
      </body>
    </html>
  );
}

この layout.js は、app/ 以下の すべてのページに適用される ため、ヘッダーやフッターを共通化できます。

さらに、特定のフォルダごとに異なるレイアウトを適用することも可能 です。

JSX
// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <h2>ダッシュボード</h2>
      {children}
    </div>
  );
}

適用範囲

  • app/layout.js → すべてのページに適用
  • app/dashboard/layout.js → /dashboard 以下のページに適用

ネストレイアウトを活用すると、コードの重複を避けつつ、統一感のあるデザインが可能になります。

5. まとめ

Next.js 14 の App Router では、フォルダ構造がそのままルートになる直感的な設計 になっています。

✅ 学んだこと

  • app/ フォルダ内の page.js をルートとして扱う
  • [id] を使って動的ルーティングを実装
  • [...slug] を使ってキャッチオールルートを作成
  • layout.js でネストされたレイアウトを適用

今後の Next.js プロジェクトでは App Router を活用し、より柔軟なルーティングを設計しましょう。

シリーズ一覧Next.js 14 App Router の基礎
全 17 回
フロントエンド開発
回タイトルリンク
第 1 回Page Router と App Router の違い詳 細
第 2 回App Router のルーティングこの記事
第 3 回App Router における Metadata の設定詳 細
第 4 回OGP・Twitter 画像の自動設定詳 細
第 5 回App Router における API ルートの基本詳 細
第 6 回use server と use client の使い分け詳 細
第 7 回useContext の Provider の適用方法詳 細
第 8 回next/link の基本と使い方詳 細
第 9 回next/image の概要詳 細
第 10 回next/navigation の使い方詳 細

似た記事[一覧]