Next.js のベストプラクティス
Next.js App Router 開発の原則です。
1. サーバーコンポーネントとクライアントコンポーネント
判断フローチャート
Does it need...?
│
├── useState, useEffect, event handlers
│ └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│ └── Server Component (default)
│
└── Both?
└── Split: Server parent + Client child
デフォルトの設定
| 種類 | 用途 |
|---|
| サーバー | データ取得、レイアウト、静的コンテンツ |
| クライアント | フォーム、ボタン、インタラクティブな UI |
2. データ取得のパターン
フェッチ戦略
| パターン | 用途 |
|---|
| デフォルト | バージョン／設定に依存します。現在のフェッチのデフォルトはキャッシュされません |
| 明示的なキャッシュ | データを共有できる場合は fetch(url, { cache: "force-cache" }) |
| 再検証 | ISR（時間ベースの更新） |
| キャッシュなし | 動的（リクエストごと） |
データフロー
| ソース | パターン |
|---|
| データベース | サーバーコンポーネントでフェッチ |
| API | キャッシュを使用してフェッチ |
| ユーザー入力 | クライアントの状態＋サーバーアクション |
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 で入力を検証する
- 適切なステータスコードを返す
- エラーを適切に処理する
- 依存関係とデプロイ環境でのサポートに応じて Node.js または Edge ランタイムを選択する。Edge で Node API が利用できると想定しない
5. パフォーマンスの原則
画像の最適化
- next/image コンポーネントを使用する
- ファーストビューに表示される画像には priority を設定する
- ぼかしプレースホルダーを指定する
- レスポンシブサイズを使用する
バンドルの最適化
- 重いコンポーネントには動的インポートを使用する
- ルートベースのコード分割（自動）
- バンドルアナライザーで分析する
6. メタデータ
静的と動的
| 種類 | 用途 |
|---|
| 静的エクスポート | 固定メタデータ |
| generateMetadata | ルートごとの動的メタデータ |
必須タグ
- title（50～60 文字）
- description（150～160 文字）
- Open Graph 画像
- canonical URL
7. キャッシュ戦略
キャッシュレイヤー
| レイヤー | 制御方法 |
|---|
| リクエスト | fetch オプション |
| データ | revalidate／タグ |
| ルート全体 | ルート設定 |
再検証
| 方法 | 用途 |
|---|
| 時間ベース | revalidate: 60 |
| オンデマンド | revalidatePath/Tag |
| キャッシュなし | no-store |
8. サーバーアクション
ユースケース
ベストプラクティス
- 'use server' を指定する
- 各アクション／ハンドラーでサーバー側の認証と認可を行う。エクスポートされたアクションは呼び出し可能なエンドポイントです
- すべての入力を検証する
- 型付きのレスポンスを返す
- エラーを処理する
9. アンチパターン
| ❌ しないこと | ✅ すること |
|---|
| あらゆる場所で 'use client' を使う | デフォルトでサーバーを使用する |
| クライアントコンポーネントでフェッチする | サーバーでフェッチする |
| 読み込み状態を省略する | loading.tsx を使用する |
| エラーバウンダリを無視する | error.tsx を使用する |
| クライアントバンドルを大きくする | 動的インポートを使用する |
10. プロジェクト構成
app/
├── (marketing)/ # Route group
│ └── page.tsx
├── (dashboard)/
│ ├── layout.tsx # Dashboard layout
│ └── page.tsx
├── api/
│ └── [resource]/
│ └── route.ts
└── components/
└── ui/
覚えておきましょう： サーバーコンポーネントがデフォルトなのには理由があります。まずサーバーコンポーネントから始め、必要な場合にのみクライアントコンポーネントを追加してください。
使用する場面
このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用できます。
バージョンの範囲
キャッシュに関するアドバイスを適用する前に、インストールされている Next.js のバージョンと Cache Components が有効かどうかを確認してください。公式のキャッシュガイドでは、これらのモデルが区別されています。データの鮮度と無効化を明示的にテストしてください。ユーザー固有の秘密情報や、認可に依存するレスポンスを共有キャッシュに入れないでください。
制限事項
- このスキルは、タスクが上記のスコープに明確に一致する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、専門家によるレビューの代替として扱わないでください。
- 必要な入力、権限、安全境界、成功基準が欠けている場合は、作業を中断して確認を求めてください。
