Next.js App RouterをClaude Codeで攻略する

Next.js App Routerは強力な反面、Server ComponentsやServer Actionsといった独自の概念が多く、実装パターンに迷うことも多いはずです。Claude Codeを活用すれば、こうした複雑な構成をスムーズに実装できます。具体的な使い方を見ていきましょう。

Server Componentsの実装をClaude Codeに任せる

App Routerでは、デフォルトでコンポーネントがServer Componentとして扱われます。「どこにuse clientを書けばいいかわからない」という悩みはよくあるパターンです。

こんなふうにClaude Codeに指示してみましょう。

app/dashboard/page.tsxを作成して。
DBからユーザー一覧を取得するServer Componentにすること。
データ取得にはprismaを使い、取得したデータを<UserList>に渡す構成にして。
<UserList>はクライアント側でインタラクションが必要なのでuse clientにすること。

このように「どこがサーバー側でどこがクライアント側か」を明示することで、Claude Codeは適切にコンポーネントを分割して生成してくれます。

Server Actionsをフォームと組み合わせて実装する

Server Actionsはフォームの送信処理をサーバー側で完結させられる便利な機能ですが、バリデーションやエラーハンドリングのボイラープレートが多くなりがちです。

app/actions/createPost.tsを作成して。
Server Actionとして定義し、zodでバリデーション、prismaでDBへの保存、
成功時はrevalidatePathで/postsを再検証する処理を含めて。

Claude Codeはこの指示から"use server"ディレクティブ付きの関数を生成し、zodスキーマ・エラーレスポンスのパターンまで一括で書いてくれます。

※ボイラープレート: プロジェクトを始めるたびに毎回書く定型的なコードのこと。※スキーマ: データベースのテーブル構造や型定義のこと。※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

Route Handlersで外部連携エンドポイントを作る

Webhookの受信や外部APIとの連携には、app/api配下のRoute Handlersが便利です。

app/api/webhook/stripe/route.tsを作成して。
StripeのWebhookを受信し、stripe.webhooks.constructEventで署名検証をする。
checkout.session.completedイベントを処理してDBの注文ステータスを更新する実装にして。

// Claude Codeが生成するコードのイメージ
export async function POST(request: Request) {
  const body = await request.text();
  const sig = request.headers.get("stripe-signature")!;
  const event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
  // ...
}

Route Handlerのファイル名規則（route.ts）やHTTPメソッドの関数名（GET / POST）もClaude Codeは把握しているので、App Router固有のお作法を意識せずに実装を進められます。指示するときはファイルパスをフルパスで渡すと、より正確なコードが得られますよ。

※エンドポイント: APIにアクセスするためのURL。例: `/api/users` や `/api/posts/123` など。