nextjs-app-router-patterns

Next.js App Router パターン

Next.js 14+ の App Router アーキテクチャ、Server Components、およびモダンなフルスタック React 開発のための包括的なパターンです。

このスキルを使う場面

• App Router を使って新しい Next.js アプリケーションを構築する
• Pages Router から App Router へ移行する
• Server Components とストリーミングを実装する
• 並列ルートとインターセプトルートを設定する
• データ取得とキャッシュを最適化する
• Server Actions を使ってフルスタック機能を構築する

コアコンセプト

1. レンダリングモード

モード	場所	使用する場面
Server Components	サーバーのみ	データ取得、重い計算、シークレット
Client Components	ブラウザ	インタラクティブ性、フック、ブラウザ API
Static	ビルド時	ほとんど変化しないコンテンツ
Dynamic	リクエスト時	パーソナライズまたはリアルタイムデータ
Streaming	プログレッシブ	大きなページ、遅いデータソース

2. ファイル規約

app/
├── layout.tsx       # Shared UI wrapper
├── page.tsx         # Route UI
├── loading.tsx      # Loading UI (Suspense)
├── error.tsx        # Error boundary
├── not-found.tsx    # 404 UI
├── route.ts         # API endpoint
├── template.tsx     # Re-mounted layout
├── default.tsx      # Parallel route fallback
└── opengraph-image.tsx  # OG image generation

クイックスタート

// app/layout.tsx
import { Inter } from 'next/font/google'
import { Providers } from './providers'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: { default: 'My App', template: '%s | My App' },
  description: 'Built with Next.js App Router',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

// app/page.tsx - Server Component by default
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // ISR: revalidate every hour
  })
  return res.json()
}

export default async function HomePage() {
  const products = await getProducts()

  return (
    <main>
      <h1>Products</h1>
      <ProductGrid products={products} />
    </main>
  )
}

詳細なパターンと実例

詳細なパターンのドキュメントは references/details.md にあります。上記のナビゲーション階層では不十分な場合は、そのファイルを読んでください。

ベストプラクティス

推奨事項

• Server Components から始める - 必要な場合にのみ 'use client' を追加する
• データ取得をコロケーションする - データは使われる場所で取得する
• Suspense バウンダリを使う - 遅いデータに対してストリーミングを有効にする
• 並列ルートを活用する - 独立したローディング状態
• Server Actions を使う - プログレッシブエンハンスメントを伴うミューテーションに

非推奨事項

• シリアライズ可能なデータを渡さない - Server → Client 境界の制約
• Server Components でフックを使わない - useState、useEffect はなし
• Client Components でフェッチしない - Server Components または React Query を使う
• レイアウトを過度にネストしない - 各レイアウトはコンポーネントツリーに追加される
• ローディング状態を無視しない - 常に loading.tsx または Suspense を提供する