【Next.js】App Router ルーティング

Last updated at 2025-05-25Posted at 2025-05-24

1. ルーティングの設定方法

Next.js App Router は ファイルシステムベースのルーティング を採用している。
app/ ディレクトリ以下の構造がそのまま URL 構造になる。

基本ルーティング

app/page.tsx → /
app/about/page.tsx → /about
app/products/page.tsx → /products

ネストルーティング

app/products/page.tsx → /products
app/products/details/page.tsx → /products/details

2. 特殊な役割を持つファイル名

App Router には、特定のファイル名が持つ「予約された意味」がある

ファイル名	役割
`page.tsx`	ページ本体（ルートに対応）
`layout.tsx`	ページ共通のレイアウト。子ルートを `children` としてラップ
`template.tsx`	共通レイアウト。遷移時に再レンダリング
`loading.tsx`	非同期処理中のローディングUI（Suspense）
`error.tsx`	レンダリングやフェッチエラー時のエラーページ
`not-found.tsx`	`notFound()` 実行時の 404 ページ
`head.tsx`	ページごとの `<head>` カスタマイズ
`route.ts`	APIルートの定義

3. ファイル構造とレンダリングの関係

ファイルとフォルダの構造がレンダリング時の階層と一致する。

app/
├── layout.tsx        # グローバルレイアウト
├── page.tsx          # "/"
├── about/
│   ├── layout.tsx    # "/about" 用レイアウト
│   └── page.tsx      # "/about"

レンダリング順序：

app/layout.tsx → app/about/layout.tsx → app/about/page.tsx

4. 🔀 動的ルーティング

動的セグメントは、フォルダ名を角括弧で囲むことで作成できる
動的セグメントは、layout、page、route、generateMetadata関数にparams propとして渡される

app/blog/[slug]/page.tsx → /blog/:slug

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
  return <h1>{params.slug}</h1>;
}

静的生成のための `generateStaticParams`

generateStaticParams関数は、動的ルートセグメントと組み合わせて使用することで、リクエスト時ではなくビルド時にルートを静的に生成できる。

export async function generateStaticParams() {
  const posts = await fetchPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

5. プライベートフォルダ（アンダースコア `_`）

アンダースコア _ で始まるフォルダはルーティングに含まれない。

app/
├── _components/
│   └── Header.tsx

用途例：

UIロジックをルーティングロジックから分離する
プロジェクト全体で内部ファイルを一貫して整理する
コードエディタでファイルを整理およびグループ化する
将来のNext.jsファイル規約との潜在的な命名競合を回避する

6. ルートグループフォルダ

()で囲まれたフォルダ名は、URL には影響しない。
URLパスの構造に影響を与えることなく、ルートセグメントやプロジェクトファイルを論理的なグループに整理することができる。

app/
├── (marketing)/
│   └── home/page.tsx     # → /home
├── (dashboard)/
│   └── user/page.tsx     # → /user