app-router

Next.js App Router のパターン

概要

App Router は、React Server Components を基盤とする Next.js のファイルシステムベースのルーターです。app/ ディレクトリ構造を使用し、フォルダーでルートを定義し、特別なファイルで UI の動作を制御します。

コアとなるファイル規約

ルートファイル

各ルートセグメントはフォルダーで定義します。フォルダー内の特別なファイルで動作を制御します。

ファイル	目的
page.tsx	ルート固有の UI。ルートを一般公開します
layout.tsx	共有 UI のラッパー。ナビゲーション間で状態を保持します
loading.tsx	React Suspense を使用した読み込み UI
error.tsx	ルートセグメントのエラーバウンダリー
not-found.tsx	404 レスポンス用の UI
template.tsx	レイアウトと似ていますが、ナビゲーション時に再レンダリングします
default.tsx	並列ルートのフォールバック

フォルダー規約

パターン	目的	例
folder/	ルートセグメント	app/blog/ → /blog
[folder]/	動的セグメント	app/blog/[slug]/ → /blog/:slug
[...folder]/	キャッチオールセグメント	app/docs/[...slug]/ → /docs/*
[[...folder]]/	オプションのキャッチオール	app/shop/[[...slug]]/ → /shop または /shop/*
(folder)/	ルートグループ（URL なし）	app/(marketing)/about/ → /about
@folder/	名前付きスロット（並列ルート）	app/@modal/login/
_folder/	プライベートフォルダー（除外される）	app/_components/

ルートの作成

基本的なルート構造

新しいルートを作成するには、page.tsx を含むフォルダーを追加します。

app/
├── page.tsx              # / (home)
├── about/
│   └── page.tsx          # /about
└── blog/
    ├── page.tsx          # /blog
    └── [slug]/
        └── page.tsx      # /blog/:slug

ページコンポーネント

ページはデフォルトでサーバーコンポーネントです。

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our company.</p>
    </main>
  )
}

動的ルート

params プロパティを介してルートパラメーターにアクセスします。

// app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params
  const post = await getPost(slug)

  return <article>{post.content}</article>
}

レイアウト

ルートレイアウト（必須）

すべてのアプリには、<html> と <body> を含むルートレイアウトが必要です。

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

ネストされたレイアウト

レイアウトは子要素をラップし、状態を保持します。

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  )
}

読み込み状態とエラー状態

読み込み UI

Suspense を使用して、すぐに表示される読み込み状態を作成します。

// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Loading...</div>
}

エラーバウンダリー

エラーを適切に処理します。

// app/dashboard/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

ルートグループ

URL 構造に影響を与えずにルートを整理します。

app/
├── (marketing)/
│   ├── layout.tsx        # Marketing layout
│   ├── about/page.tsx    # /about
│   └── contact/page.tsx  # /contact
└── (shop)/
    ├── layout.tsx        # Shop layout
    └── products/page.tsx # /products

メタデータ

静的メタデータ

// app/about/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn more about our company',
}

動的メタデータ

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  return { title: post.title }
}

主なパターン

1. コロケーション：コンポーネント、テスト、スタイルをルートの近くに配置します
2. プライベートフォルダー：ルートではないファイルには _folder を使用します
3. ルートグループ：URL に影響を与えずに整理するには (folder) を使用します
4. 並列ルート：複雑なレイアウトには @slot を使用します
5. インターセプトルート：モーダルには (.) パターンを使用します

リソース

詳細なパターンについては、以下を参照してください。

• references/routing-conventions.md - ファイル規約の全容
• references/layouts-templates.md - レイアウトの合成パターン
• references/loading-error-states.md - Suspense とエラー処理
• examples/dynamic-routes.md - 動的ルーティングの例
• examples/parallel-routes.md - 並列ルートとインターセプトルート