Claude Code × Next.js でWebアプリを作る方法
Claude Code × Next.js の相性が良い理由
Next.jsはReactベースのフルスタックフレームワークで、2026年現在も最も人気のあるWeb開発フレームワークの一つです。Claude Codeとの組み合わせが特に優れている理由は以下の3つです。
- ファイルベースルーティング - ディレクトリ構造がそのままルーティングになるため、Claude Codeが構造を把握しやすい
- TypeScript標準サポート - 型情報があることでClaude Codeの出力精度が向上する
- App Router - Server Components / Client Components の使い分けを Claude Code が適切に判断できる
Claude Codeの基本操作を理解している前提で、実際にアプリケーションを構築していきましょう。
ステップ1: プロジェクトの作成
まず、Claude Codeを起動してプロジェクトを作成します。
claude
> Next.js 15のプロジェクトを作成して。
TypeScript、Tailwind CSS、App Routerを使用。
プロジェクト名は「task-manager」。Claude Codeが npx create-next-app@latest を実行し、必要な設定を自動で行います。
ステップ2: CLAUDE.md の作成
プロジェクトの方針を CLAUDE.md に記述します。CLAUDE.mdの書き方を参考に、以下のような内容を作成しましょう。
# Task Manager
## 技術スタック
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- Prisma (SQLite)
## ディレクトリ構成
- app/ - ページとレイアウト
- components/ - 再利用可能なUIコンポーネント
- lib/ - ユーティリティ関数
- prisma/ - データベーススキーマ
## コーディング規約
- コンポーネントはアロー関数で定義
- Server Componentsをデフォルトで使用し、インタラクションが必要な場合のみ"use client"を付与
- Tailwind CSSのクラスはclsxで結合ステップ3: データベースの設計
Prismaを使ってデータモデルを定義します。
> Prismaをセットアップして、以下のモデルを作成して。
- Task: id, title, description, status(TODO/IN_PROGRESS/DONE), priority(LOW/MEDIUM/HIGH), createdAt, updatedAt
- Tag: id, name, color
- TaskとTagは多対多の関係Claude Codeは prisma/schema.prisma を作成し、マイグレーションを実行します。
model Task {
id String @id @default(cuid())
title String
description String?
status Status @default(TODO)
priority Priority @default(MEDIUM)
tags Tag[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
enum Status {
TODO
IN_PROGRESS
DONE
}
enum Priority {
LOW
MEDIUM
HIGH
}ステップ4: APIルートの作成
Next.jsのRoute Handlersを使ってREST APIを作成します。
> app/api/tasks/ 配下にCRUDのAPIルートを作成して。
- GET /api/tasks - タスク一覧取得（フィルタリング・ソート対応）
- POST /api/tasks - タスク作成
- PATCH /api/tasks/[id] - タスク更新
- DELETE /api/tasks/[id] - タスク削除
エラーハンドリングとバリデーションも含めて。Claude Codeは各エンドポイントのファイルを作成し、Prismaクライアントとの連携コードを書きます。
ステップ5: UIコンポーネントの作成
タスク管理画面のUIを構築します。
> Kanbanボード形式のタスク管理UIを作成して。
- TODO / IN_PROGRESS / DONE の3カラム
- ドラッグ＆ドロップでステータス変更
- タスクカードには優先度をバッジで表示
- 新規タスク追加モーダル
Tailwind CSSでスタイリング。レスポンシブ対応必須。このように、UIの要件を具体的に指示することで、Claude Codeは適切なコンポーネント分割とスタイリングを行います。
ステップ6: Server Actions の活用
Next.js 15ではServer Actionsを使ってフォーム処理をシンプルに実装できます。
// app/actions/tasks.ts
"use server"
import { prisma } from "@/lib/prisma"
import { revalidatePath } from "next/cache"
export async function createTask(formData: FormData) {
const title = formData.get("title") as string
const description = formData.get("description") as string
await prisma.task.create({
data: { title, description }
})
revalidatePath("/")
}ステップ7: テストの追加
品質を担保するためにテストを追加します。
> 以下のテストを追加して。
1. APIルートの統合テスト（vitest + supertest）
2. UIコンポーネントのユニットテスト（Testing Library）
3. 主要フローのE2Eテスト（Playwright）ステップ8: デプロイ
Vercelにデプロイします。
> Vercelへのデプロイ設定をして。
環境変数DATABASE_URLの設定も含めて。開発中に役立つClaude Codeの使い方
エラーが出たらそのまま貼る
npm run dev 2>&1 | claude "このエラーを修正して"段階的に機能を追加する
一度にすべてを作ろうとせず、MVPから段階的に機能を追加するアプローチが効果的です。
フェーズ1: 基本CRUD → フェーズ2: フィルタ・検索 → フェーズ3: 認証 → フェーズ4: リアルタイム同期コンポーネントの責務を明確にする
Claude Codeに指示する際、各コンポーネントの責務を明確にすると、より保守性の高いコードが生成されます。
まとめ
Claude Code × Next.js の組み合わせは、Webアプリケーション開発を大幅に加速させます。特に、TypeScriptとApp Routerの構造化されたパターンにより、Claude Codeの出力品質が高くなるのが特徴です。
Astroを使った静的サイト構築に興味がある方は、Claude Code × Astroの記事も参考にしてください。