CursorとClaude Codeでスキップ Next.js開発が3倍速になる設定手順【2026年版】

2026年ワークフローの全体像

Cursor IDE ← コード編集・補完（リアルタイム）
     ↑
  AGENTS.md（共通ルール）
     ↓
Claude Code CLI ← マルチファイル編集・リファクタリング
     ↑
  CLAUDE.md（Claude専用ルール）

Step 1: プロジェクトのセットアップ

# Next.js 15 + TypeScript + Tailwind + Prismaのフルスタック構成
npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

cd my-app
npm install prisma @prisma/client @auth/prisma-adapter

# Prismaを初期化
npx prisma init --datasource-provider postgresql

Step 2: AGENTS.md（両ツールで共有するルール）

<!-- AGENTS.md -->
# プロジェクトルール（Cursor・Claude Code共通）

## 技術スタック
- Next.js 15 App Router / TypeScript 5.4 / Prisma 6 / PostgreSQL
- Tailwind CSS 3 + shadcn/ui

## 必ず守るルール
- `any` 型を使わない → `unknown` を使う
- Server Componentをデフォルトにする（use clientは最小限に）
- Server Actionsで全入力をZodでバリデーションする
- src/app/ 以外のディレクトリ構造を変更しない

## 変更前確認が必要
- prisma/schema.prisma（マイグレーション影響）
- src/lib/auth.ts（認証ロジック）

Step 3: CLAUDE.md（Claude Code専用ルール）

<!-- CLAUDE.md -->
# Claude Code固有設定

## 禁止操作
- `git push --force` は禁止
- .env ファイルをコミットしない
- production/ フォルダを変更しない

## テスト
- 変更後は `npm run typecheck && npm run lint` を実行する

## 不確かな場合
- 仕様が曖昧なら「確認: ...?」と質問してから実装する

Claude Codeでよく使うコマンド

# プロジェクト全体の説明
claude "このNext.jsプロジェクトのアーキテクチャを説明して"

# Server Actionの生成
claude "ユーザー登録のServer ActionをZodバリデーション付きで作って"

# TypeScript型エラーの一括修正
claude "TypeScriptのエラーをすべて修正してください（strict: trueを維持）"

# Prismaスキーマからの型生成後のコード更新
claude "Prismaスキーマを変更したので影響を受けるファイルを確認して修正して"

Cursorでの効率的な使い方

よく使うショートカット（Mac）:
  Cmd + K    → 選択範囲をAIで編集
  Cmd + L    → AIチャットを開く（ファイルコンテキスト付き）
  Cmd + I    → インライン補完を受け入れる

Composerで複数ファイルを一度に編集:
  1. Cmd + Shift + P → "Cursor: Open Composer"
  2. "src/app/page.tsxとcomponents/Header.tsxを修正して"
  → 複数ファイルが同時に編集される

あわせて読みたい

• Claude Code インストール完全ガイド【2026年版】
• Claude Code CLAUDE.md完全ガイド
• Claude Codeコンテキスト管理5ステップ