Next.js で使う

おすすめ CLAUDE.md テンプレート

## プロジェクト概要
[プロジェクトの説明]

## 技術スタック
- Next.js 15 (App Router)
- TypeScript 5.x（strict: true）
- Tailwind CSS v4
- Supabase（DB + Auth）

## ディレクトリ構成
- src/app/ → ルーティング（App Router）
- src/components/ → 再利用可能なUIコンポーネント
- src/lib/ → ユーティリティ・外部サービスクライアント
- src/types/ → 型定義

## コーディングルール
- Server Component / Client Component の使い分けを意識する
- "use client" は本当に必要な時だけ付ける
- データフェッチはなるべくServer Componentで行う
- コメントは書かない（型と命名で表現する）

## 禁止事項
- any を使わない
- pages/ ディレクトリは使わない（App Routerのみ）
- useEffect でデータフェッチしない（Server ComponentかSWR/TanStack Queryを使う）

---

※TypeScript: JavaScriptに型定義を追加した言語。型チェックによりバグを事前に発見しやすくなる。※CLAUDE.md: プロジェクトのルートに置くClaude Code専用の設定ファイル。プロジェクト固有のルールやコンテキストを記述する。

よく使うプロンプトパターン

ページを作る

app/dashboard/page.tsx を作って。
ログイン済みユーザーのみアクセス可能で、ユーザー情報をSupabaseから取得して表示する。

APIルートを作る

app/api/users/route.ts を作って。
GET: ユーザー一覧を返す。POSTは今は不要。認証チェックをmiddlewareで行う前提。

Server ComponentとClient Componentを分離する

このコンポーネントをServer ComponentとClient Componentに分離して。
データフェッチはServer側で、インタラクション（クリック等）はClient側に。

---

※プロンプト: AIへの指示文。Claude Codeへの指示の質がそのまま出力の質に影響する。※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

App Router特有の注意点

エラーが出たら型情報を渡す

このServer Componentでこのエラーが出ている。型定義とあわせて見て。

Type error: Type 'Promise<User>' is not assignable to type 'User'.

Metadata APIの使い方

このページにMetadata APIを使ってOGPタグを追加して。
titleとdescriptionはページのh1と最初の段落から自動生成して。

---

ハマりやすいポイントと回避策

use client の過剰付与: 「動かないから全部にuse clientをつけた」→ Server Componentの恩恵がゼロになる。Claude Codeに「use clientが適切な箇所だけになるよう整理して」と頼む。

水和エラー（Hydration Error）: SSRとクライアントで異なるHTMLが生成される問題。「このHydration Errorを解決して」とエラーメッセージを貼れば解決してくれる。

※SSR: Server-Side Rendering の略。HTMLをサーバー側で生成してブラウザに送る方式。SEOや初期表示速度に優れる。