Cursor × Next.js 開発環境セットアップガイド

このガイドは、開発を始める前に「AIが迷わず、正確に、安全にコードを書ける状態」を整えるための手順書です。

前提: 使用する技術スタック

• エディタ (AI)：Cursor
• フレームワーク： Next.js (App Router)
• 言語：TypeScript
• データベース：Neon (Serverless PostgreSQL)
• ORM： Prisma
• デプロイ：Vercel

設定 1: プロジェクトの土台作成 (CLI)

まずは標準的なコマンドでプロジェクトを作成し、必要なライブラリをインストールします。

1. プロジェクト作成

ターミナル（Cursor内で Ctrl + ~）を開き、実行します。

npx create-next-app@latest my-app
# 設定の推奨回答:
# - TypeScript: Yes
# - ESLint: Yes
# - Tailwind CSS: Yes
# - src/ directory: No (好みですが、今回は app/ 構成を想定)
# - App Router: Yes
# - Customize import alias: No (@/*)

2. 必須ツールのインストール

作成したディレクトリに移動し、整形ツール（Prettier）とデータベースツール（Prisma）を入れます。

cd my-app

# 整形ツールのインストール
npm install -D prettier prettier-plugin-tailwindcss eslint-config-prettier

# Prismaのセットアップ
npm install prisma --save-dev
npm install @prisma/client
npx prisma init

設定 2: エディタ設定 (Human Rules)

人間が快適に開発し、チームで設定を統一するための設定です。

1. VS Code設定 (.vscode/settings.json)

プロジェクトルートに .vscode フォルダを作り、settings.json を作成。 これにより、「保存したら勝手にフォーマット」「不要なファイルは非表示」が実現します。

{
　"editor.formatOnSave": true,
　"editor.defaultFormatter": "esbenp.prettier-vscode",
　"editor.codeActionsOnSave": {
　"source.fixAll.eslint": "explicit",
　"source.organizeImports": "explicit"
},
　"files.exclude": {
　"**/.git": true,
　"**/.DS_Store": true
},
　"search.exclude": {
　"**/node_modules": true,
　"**/.next": true
},
　"tailwindCSS.includeLanguages": {
　"typescript": "javascript",
　"typescriptreact": "javascript"
},
　"[prisma]": {
　"editor.defaultFormatter": "Prisma.prisma"
　}
}

2. 推奨拡張機能 (.vscode/extensions.json)

Cursorに「これを入れて」と指示させるファイルです。

{
　"recommendations": [
　"esbenp.prettier-vscode",
　"bradlc.vscode-tailwindcss",
　"prisma.prisma"
　]
}

3. 整形ルール (.prettierrc & .eslintrc.json)

Tailwindのクラス順序などを強制します。この2つのファイルは、ディレクトリ（my-app）直下に作成します。

.prettierrc

{
　"semi": false,
　"singleQuote": true,
　"tabWidth": 2,
　"plugins": ["prettier-plugin-tailwindcss"]
}

.eslintrc.json

{
　"extends": ["next/core-web-vitals", "prettier"],
　"rules": {
　"no-console": ["warn", { "allow": ["warn", "error"] }]
　}
}

設定 3: AIの脳みそを作る (Cursor Rules)

ここがCursor開発の最重要ポイントです。AIにプロジェクトの文脈とルールを教え込みます。 現在は巨大な .cursorrules ではなく、目的別にファイルを分ける方法 (.mdc) がベストプラクティスです。

1. ディレクトリ作成

#.cursor > rulesフォルダを作成
mkdir -p .cursor/rules

2. ルールファイルの配置

以下の6つのファイルを .cursor/rules/ 内に作成します。

3. AIに読ませない設定 (.cursorignore)

セキュリティと精度向上のため、プロジェクトルートに .cursorignore を作成します。

.env
.env.*
package-lock.json
**/node_modules
**/.next
**/dist/* Your code... */

設定 4: データベース接続設定

Vercel × Neon の構成を紐付けます。

1.環境変数の設定

 Neonのダッシュボードから接続文字列を取得し、.env ファイルに記述します。

DATABASE_URL="postgresql://user:password@endpoint.neon.tech/neondb?sslmode=require"

2.Prismaの設定

 prisma/schema.prisma に作成したスキーマを記述し、同期します。

npx prisma generate
npx prisma db push

3.シングルトンの作成 (lib/prisma.ts)

Next.jsのホットリロード対策として、Prismaクライアントをシングルトン化するファイルを lib/ に作成します（これがないとエラー頻発の原因になります）。

設定 5: 開発開始のチェックリスト

開発を始める前に、設定が正しく機能しているか確認しましょう。

• 設定ファイル: .vscode/settings.json はエラーなく保存されているか？
• 拡張機能: Prettier, Tailwind, Prisma プラグインはインストールされているか？
• 整形: 適当な .tsx ファイルで保存時にフォーマット（整形）が走るか？
• ルール: Cursorのチャットで「このプロジェクトの技術スタックは？」と聞いて、stack.mdc の内容（Next.js + Neonなど）が返ってくるか？
• DB接続: npx prisma studio で管理画面が開き、DBに接続できるか？

Cursor活用方法 (開発中のTips)

設定が終わったら、あとは開発するだけです。以下のショートカットを駆使してください。

• Cmd+I (Composer)：
  • 「frontend.mdc に従って、商品一覧ページを作って」のように、作成したルールファイル名を含めて指示すると精度が爆上がりします。
• @Codebase：
  • チャットで質問する際、プロジェクト全体の文脈を知りたい時に付けます（例: @Codebase 認証機能の実装状況を教えて）。
• @Web：
  • 最新のNext.jsのドキュメントなどを参照させたい時に使用します。