Webアプリを作る — Next.js × Claude Code

理論は十分だ。ここからは実際にアプリを作る。Claude Codeを使って、Next.jsプロジェクトをゼロからデプロイまで一気に駆け抜ける。

プロジェクト初期化

Claude Codeで始める

mkdir my-app && cd my-app
claude

> Next.js 15 + TypeScript + Tailwind CSS + App Router でプロジェクトを初期化して。
> パッケージマネージャはnpmで。

Claude Codeは npx create-next-app@latest を実行し、オプションを適切に選択してプロジェクトを立ち上げる。

CLAUDE.md を最初に書く

プロジェクト初期化直後にCLAUDE.mdを作成するのが鉄則。

> このプロジェクトのCLAUDE.mdを作成して。以下を含めて:
> - Tech Stack: Next.js 15, TypeScript, Tailwind CSS, App Router
> - コーディング規約: イミュータブルパターン、関数50行以下
> - テスト: Vitest + Testing Library
> - デプロイ: GitHub Pages（静的エクスポート）

以降のすべての作業で、CLAUDE.mdの規約が自動的に適用される。

コンポーネント作成ワークフロー

既存パターンの参照

> src/components/Header.tsx を参考にして、Footer コンポーネントを作って。
> SNSリンク（Twitter, GitHub）を含めて。

既存コンポーネントを参照させることで、スタイルやパターンの一貫性が保たれる。

レスポンシブデザイン

> モバイルファーストでレスポンシブなヒーローセクションを作って。
> - モバイル: 縦並び、テキスト中央
> - デスクトップ: 横並び、左テキスト・右画像
> Tailwind CSSのブレークポイントを使って。

Claude Codeはレスポンシブクラス（md:, lg: 等）を適切に使ったコードを生成する。

APIルートの実装

App Router のAPI

> /api/articles エンドポイントを作成して。
> - GET: 全記事の一覧（ページネーション付き）
> - クエリパラメータ: page, limit, category
> - レスポンス形式は ApiResponse<Article[]> パターンで

Claude Codeは app/api/articles/route.ts にRoute Handlerを作成する。

テスト戦略

TDDで品質を担保する

> /tdd
> BMI計算のユーティリティ関数を作りたい。
> まずテストから書いて。

1. テストを先に書く（RED）
2. テスト実行 → 失敗確認
3. 実装（GREEN）
4. テスト実行 → 成功確認
5. リファクタリング

ビルドとデプロイ

静的エクスポート

> next.config.ts に output: 'export' を設定して、
> npm run build で静的エクスポートして。エラーがあれば修正して。

GitHub Pagesへのデプロイ

> GitHub Actions で GitHub Pages に自動デプロイするワークフローを作って。
> mainブランチへのpush時にトリガー。

Claude Codeは .github/workflows/deploy.yml を作成し、ビルド→デプロイのパイプラインを構築する。

よくあるパターン

データフェッチ

// Server Component でのデータ取得
async function ArticleList() {
  const articles = await getArticles()
  return <ul>{articles.map(a => <li key={a.id}>{a.title}</li>)}</ul>
}

フォーム処理

> React Hook Form + Zod でお問い合わせフォームを作って。
> バリデーション: 名前（必須）、メール（必須・形式チェック）、内容（必須・10文字以上）

認証

> Firebase Authentication でメールログインを実装して。
> AuthContext でグローバルに認証状態を管理。