Claude CodeでReact・Next.jsを開発する方法！コンポーネント生成からビルド最適化まで

はじめに

「Reactコンポーネントの書き方がパターン化していて、毎回同じものを書いている」

「Next.js App RouterとPages Routerの違いに戸惑っている」

「Server ComponentsとClient Componentsの使い分けがわからない」

ReactとNext.jsは現代のWebフロントエンド開発のスタンダードですが、進化が速く、ベストプラクティスも変化し続けています。Claude Codeを使えば、コンポーネント生成から状態管理・パフォーマンス最適化まで、最新のプラクティスに沿った開発ができます。

目次

1. React開発でのClaude Code活用の基本
2. コンポーネントの自動生成
3. 状態管理の実装
4. Next.js App Routerの活用
5. Server ComponentsとClient Componentsの使い分け
6. フォームとバリデーション
7. パフォーマンス最適化
8. テストの自動生成
9. まとめ

1. React開発でのClaude Code活用の基本

プロジェクト構成の自動認識

Claude Codeはpackage.jsonを読み込んで、使用しているReactのバージョン・Next.jsのバージョン・状態管理ライブラリ（Redux・Zustand・Jotai等）・スタイリング（CSS Modules・Tailwind・styled-components等）を自動認識します。

効果的な指示の例

> このプロジェクトのコーディングスタイルと
  使用しているライブラリを確認してから、
  以下のコンポーネントを作成してください：[要件]

プロジェクトの既存コードを分析してから生成するため、一貫したスタイルのコンポーネントが生成されます。

2. コンポーネントの自動生成

機能コンポーネントの生成

> 以下の要件でReactコンポーネントを作成してください。

  コンポーネント名：ProductCard
  要件：
  - 商品画像・タイトル・価格・評価（星）・カートに追加ボタンを表示
  - 在庫切れの場合はボタンをdisabledにする
  - お気に入りトグルボタン
  - モバイル対応（Tailwind CSS使用）
  - TypeScriptの型定義
  - Storybookのstoryファイルも作成

  プロジェクトの既存コンポーネントのスタイルに合わせてください。

ページコンポーネントの生成

> Next.js App Router対応のダッシュボードページを作成してください。

  ページ構成：
  - 左サイドバー（ナビゲーション）
  - ヘッダー（ユーザー情報・通知）
  - メインコンテンツエリア（統計カード・グラフ・最新アクティビティ）

  要件：
  - レスポンシブデザイン（モバイルはサイドバーをドロワーに変更）
  - サーバーコンポーネントで初期データを取得
  - ローディング状態（loading.tsx）とエラー状態（error.tsx）を実装

カスタムフックの生成

> 以下の機能を持つカスタムフックを作成してください。

  フック名：useInfiniteScroll
  機能：
  - IntersectionObserverを使ったInfinite Scroll
  - ローディング状態の管理
  - エラーハンドリング
  - 重複フェッチの防止
  - TypeScript対応

3. 状態管理の実装

Zustandでの状態管理

> このコンポーネントのローカル状態をZustandのグローバルストアに移行してください。

  移行する状態：
  - ユーザー情報（認証状態）
  - ショッピングカートの中身
  - 通知の未読件数

  要件：
  - 永続化（localStorageへの保存）
  - DevToolsサポート
  - 型安全なセレクター

React Query（TanStack Query）の導入

> このAPIフェッチのコードをReact Queryに移行してください。

  移行のポイント：
  - useEffectとuseStateを使ったフェッチをuseQueryに変換
  - ミューテーション（作成・更新・削除）をuseMutationに変換
  - キャッシュの設定（staleTime・cacheTime）
  - 楽観的更新の実装
  - エラーハンドリングの統一

4. Next.js App Routerの活用

ファイルベースルーティングの設定

> 以下のページ構成をNext.js App Routerで実装してください。

  ルート構成：
  - / → ホームページ（静的）
  - /products → 商品一覧（SSG + ISR、1時間ごと再生成）
  - /products/[id] → 商品詳細（SSG、ビルド時に生成）
  - /account → マイページ（CSR、認証必須）
  - /account/orders → 注文履歴（SSR、毎回最新データ）

  各ルートに適したデータフェッチ戦略を選択してください。

Middlewareの実装

> Next.jsのMiddlewareを使って以下を実装してください：
  - 未認証ユーザーを/loginにリダイレクト
  - 認証済みユーザーが/loginにアクセスした場合は/dashboardにリダイレクト
  - 管理者ページ（/admin/*）はadminロールのみアクセス可能
  - 国際化（i18n）のパス処理

5. Server ComponentsとClient Componentsの使い分け

自動的な最適化提案

> このコンポーネントファイルを分析して、
  Server ComponentsとClient Componentsを適切に分離してください。

  判断基準：
  - イベントハンドラー・useState・useEffectを使う → Client Component
  - データフェッチのみ・静的な表示 → Server Component
  - 'use client'ディレクティブを最小限にする

  [コンポーネントファイルを貼り付け]

Server Actionsの実装

> フォームの送信処理をServer Actionsで実装してください。

  要件：
  - お問い合わせフォームの送信
  - バリデーション（Zod使用）
  - データベースへの保存
  - メール送信（バックグラウンドジョブ）
  - 成功・エラー状態のフィードバック
  - Progressive Enhancementに対応

6. フォームとバリデーション

React Hook Formの実装

> React Hook FormとZodを使った
  ユーザー登録フォームを実装してください。

  フィールド：
  - メールアドレス（重複チェック含む非同期バリデーション）
  - パスワード（8文字以上・大文字小文字数字を含む）
  - パスワード確認
  - 利用規約への同意

  エラーメッセージはフィールドの下にリアルタイム表示してください。

7. パフォーマンス最適化

画像最適化

> このコンポーネントの画像をNext.js Imageコンポーネントに変換してください。
  width・height・priority・sizes・placeholder属性を適切に設定してください。
  LCPスコアの改善を優先してください。

コンポーネントのメモ化

> このコンポーネントツリーを分析して、
  React.memo・useMemo・useCallbackを適切に追加してください。

  不要なメモ化は追加しないように注意してください。
  本当に効果があるケースのみメモ化して、
  その理由もコメントで説明してください。

8. テストの自動生成

React Testing Libraryのテスト

> ProductCardコンポーネントのテストを作成してください。

  テストシナリオ：
  - 商品情報が正しく表示される
  - 在庫切れの場合にボタンがdisabledになる
  - お気に入りボタンをクリックしたときのコールバックが呼ばれる
  - カートに追加ボタンがクリックできる

  @testing-library/user-eventを使ってユーザー操作をシミュレートしてください。

9. まとめ

Claude CodeでのReact・Next.js開発の効率化ポイント：

• プロジェクトの既存スタイルを分析してから一貫したコンポーネントを生成
• Server Components・Client Componentsの適切な分離を自動提案
• Next.js App RouterのSSG・SSR・CSRの使い分けをアドバイス
• React Hook Form + Zodの組み合わせでフォームを自動実装

よく使うライブラリとの組み合わせ：

• 状態管理：Zustand・TanStack Query
• フォーム：React Hook Form + Zod
• スタイリング：Tailwind CSS + shadcn/ui
• テスト：Vitest + React Testing Library

次回の第27回：セキュリティ診断をする方法では、脆弱性をAIが自動スキャンして修正する方法を解説します。

よくある質問（FAQ）

Q. Pages RouterからApp Routerへの移行もClaude Codeで対応できますか？

A. はい。「Pages RouterのこのコンポーネントをApp Routerに移行してください」と指示するだけで対応できます。getServerSideProps・getStaticPropsなどの変換も自動で行います。

Q. Remixなど他のフレームワークにも対応していますか？

A. 対応しています。「Remixで実装してください」のように指定することで、各フレームワークのベストプラクティスに沿ったコードを生成します。

この記事はClaude Code入門シリーズ（第3部）の第26回です。← 第25回：パフォーマンス最適化 ｜ 第27回：セキュリティ診断 →

ご質問はお問い合わせページからお気軽にどうぞ。