Next.js ベストプラクティス

Next.js App Router 開発の原則。

---

1. Server コンポーネント vs Client コンポーネント

判定フロー

以下のどれが必要か...?
│
├── useState, useEffect, イベントハンドラ
│   └── Client コンポーネント ('use client')
│
├── 直接データ取得、インタラクティブでない
│   └── Server コンポーネント (デフォルト)
│
└── 両方必要?
    └── 分割: Server 親 + Client 子

デフォルト設定

種類	用途
Server	データ取得、レイアウト、静的コンテンツ
Client	フォーム、ボタン、インタラクティブUI

---

2. データ取得パターン

取得戦略

パターン	用途
Default	静的 (ビルド時キャッシュ)
Revalidate	ISR (時間ベースの更新)
No-store	ダイナミック (毎リクエスト)

データフロー

ソース	パターン
データベース	Server コンポーネントで取得
API	キャッシング付きで取得
ユーザー入力	Client ステート + Server Action

---

3. ルーティング原則

ファイル規約

ファイル	目的
page.tsx	ルート UI
layout.tsx	共有レイアウト
loading.tsx	ローディング状態
error.tsx	エラーバウンダリ
not-found.tsx	404 ページ

ルート構成

パターン	用途
ルートグループ (name)	URL を変えずに整理
パラレルルート @slot	同じレベルの複数ページ
インターセプト (.)	モーダルオーバーレイ

---

4. API ルート

ルートハンドラ

メソッド	用途
GET	データ読取
POST	データ作成
PUT/PATCH	データ更新
DELETE	データ削除

ベストプラクティス

• Zod での入力検証
• 適切なステータスコードの返却
• エラーを適切に処理
• 可能な場合 Edge runtime を使用

---

5. パフォーマンス原則

画像最適化

• next/image コンポーネント使用
• ファーストビュー要素に priority を設定
• blur プレースホルダ提供
• レスポンシブサイズ使用

バンドル最適化

• 重いコンポーネントに動的インポート使用
• ルートベースのコード分割 (自動)
• bundle analyzer で分析

---

6. メタデータ

静的 vs ダイナミック

種類	用途
静的エクスポート	固定メタデータ
generateMetadata	ルート別ダイナミック

必須タグ

• title (50-60 文字)
• description (150-160 文字)
• Open Graph 画像
• Canonical URL

---

7. キャッシング戦略

キャッシュレイヤ

レイヤ	制御
リクエスト	fetch オプション
データ	revalidate/tags
フルルート	ルート設定

リバリデーション

方法	用途
時間ベース	revalidate: 60
オンデマンド	revalidatePath/Tag
キャッシュなし	no-store

---

8. Server Actions

ユースケース

• フォーム送信
• データ変更
• リバリデーショントリガ

ベストプラクティス

• 'use server' でマーク
• すべての入力を検証
• 型付けレスポンスを返す
• エラーハンドリング

---

9. アンチパターン

❌ しないこと	✅ すること
至るところで 'use client'	デフォルト Server
Client コンポーネントで取得	Server で取得
ローディング状態をスキップ	loading.tsx を使用
エラーバウンダリを無視	error.tsx を使用
大きな Client バンドル	動的インポート使用

---

10. プロジェクト構造

app/
├── (marketing)/     # ルートグループ
│   └── page.tsx
├── (dashboard)/
│   ├── layout.tsx   # ダッシュボードレイアウト
│   └── page.tsx
├── api/
│   └── [resource]/
│       └── route.ts
└── components/
    └── ui/

---

覚えておくこと: Server コンポーネントがデフォルトである理由があります。ここから始めて、必要な場合のみ Client を追加してください。

使用時期

このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用されます。

制限事項

• このスキルは、上記の説明と明確に一致するタスクの場合のみ使用してください。
• 出力を環境固有の検証、テスト、または専門家のレビューの代替として扱わないでください。
• 必要な入力、権限、安全性の境界、または成功基準が不足している場合は、中止して明確にしてください。