.cursorrules 完全ガイド：コピペで使えるReact/Next.js/Node.js テンプレート集【2026】
Cursorの.cursorrulesファイルを徹底解説。React・Next.js・Node.js・TypeScript対応のコピペ可能テンプレートを収録。チームでの共有方法やCLAUDE.mdとの使い分けも解説します。
#cursor#cursorrules#ai#productivity#typescript#react#nextjs
「Cursorを使っているのに、毎回同じことを説明するのが面倒…」
そんな悩みを解決するのが .cursorrules ファイルです。プロジェクトのルートに置くだけで、Cursor の AI があなたのコーディングスタイル・技術スタック・命名規則を自動的に理解してくれます。
この記事でわかること：
- .cursorrules とは何か・なぜ必要か
- 基本的な書き方と構文
- React / Next.js プロジェクト用コピペOKテンプレート
- Node.js / Express API 用コピペOKテンプレート
- TypeScript 厳格設定用コピペOKテンプレート
- チームでの .cursorrules 共有方法
- Claude Code の CLAUDE.md との使い分け
PR
.cursorrules とは？Cursorのカスタム指示ファイルの役割
.cursorrules は、Cursor AI に対してプロジェクト固有のルールや指示を伝えるための設定ファイルです。
具体的に何をするファイル？
例えば、あなたのプロジェクトで以下のルールがあるとします。
- TypeScript を厳格モードで使う
- コンポーネントは関数型のみ（クラスコンポーネント禁止）
- 変数名はキャメルケース、定数は UPPER_SNAKE_CASE
- API 呼び出しは axios ではなく fetch を使う
このようなルールを .cursorrules に書いておくと、Cursor AI が自動的にそれに従ったコードを生成してくれます。
.cursorrules がない場合 vs ある場合
なし： 毎回「TypeScript で、関数コンポーネントで、fetchを使って…」と指示する必要がある
あり： ルール自動適用 → 「ログイン機能を作って」と言うだけで適切なコードが生成される
ファイルの配置場所
my-project/
├── .cursorrules ← ここ（プロジェクトルート）
├── src/
├── package.json
└── ...
基本的な書き方と構文ルール
.cursorrules はプレーンテキスト（Markdown に近いフォーマット）で記述します。
基本構文
# プロジェクト概要
このプロジェクトは〇〇です。
# 技術スタック
- フレームワーク: Next.js 16
- 言語: TypeScript（strict モード）
- スタイリング: Tailwind CSS v4
# コーディング規約
- 変数名: キャメルケース（例: userData）
- 定数: UPPER_SNAKE_CASE（例: API_BASE_URL）
- コンポーネント: パスカルケース（例: UserProfile）
# 禁止事項
- `any` 型の使用禁止
- クラスコンポーネントの使用禁止
- console.log を本番コードに残すことを禁止
効果的な .cursorrules を書く 5 つのポイント
| ポイント | 良い例 | 悪い例 |
|---|---|---|
| 具体的に書く | fetchを使う（axiosは使わない） | HTTPクライアントを使う |
| 禁止事項を明記 | any型の使用は禁止 | 型を大切に |
| スタックを明記 | Next.js 16 App Router | 最新のNext.js |
| 例を示す | 例: const [user, setUser] = useState<User> | (例なし) |
| 短く簡潔に | 300〜500文字 | 2000文字以上（認識精度が下がる） |
【コピペOK】React / Next.js プロジェクト用テンプレート
以下をそのままコピーして .cursorrules ファイルに貼り付けてください。
# プロジェクト概要
Next.js 16 + TypeScript + Tailwind CSS v4 を使用した Web アプリケーション。
App Router（src/app/）を使用する。
# 技術スタック
- フレームワーク: Next.js 16（App Router）
- 言語: TypeScript 5.x（strict モード必須）
- スタイリング: Tailwind CSS v4
- 状態管理: React useState / useReducer（必要最小限）
- データフェッチ: React Server Components + fetch
- パッケージマネージャ: npm
# コンポーネント規約
- 関数コンポーネントのみ（クラスコンポーネント禁止）
- Server Components を優先し、必要な場合のみ Client Components を使う
- Client Components には先頭に "use client" ディレクティブを記述
- コンポーネントファイルは PascalCase（例: UserProfile.tsx）
- Props の型は interface で定義（type より interface を優先）
# 命名規約
- 変数・関数: camelCase（例: getUserData）
- 定数: UPPER_SNAKE_CASE（例: API_BASE_URL）
- コンポーネント: PascalCase（例: ArticleCard）
- ファイル名（コンポーネント以外）: kebab-case（例: use-auth.ts）
# TypeScript 規約
- any 型の使用禁止（unknown を使うこと）
- 型推論できる場合は型注釈を省略してよい
- 戻り値の型は明示的に書く
- null チェックは optional chaining (?.) を使う
# データフェッチ規約
- fetch API を使う（axios 禁止）
- Server Components でのデータフェッチを優先
- API ルートは src/app/api/ 以下に配置
- エラーハンドリングは try/catch で実装
# 禁止事項
- any 型の使用
- console.log を本番コードに残すこと
- useEffect でデータフェッチすること（Server Componentsを使うこと）
- インラインスタイル（style={{ }}）の使用
カスタマイズのポイント
上記テンプレートを使いながら、以下の部分をプロジェクトに合わせて変更してください：
フレームワーク:の行（Next.js のバージョン）パッケージマネージャ:の行（npm / yarn / pnpm / bun）状態管理:の行（Zustand / Jotai 等を使う場合は追記）
【コピペOK】Node.js / Express API 用テンプレート
# プロジェクト概要
Node.js + Express + TypeScript で構築した REST API サーバー。
PostgreSQL（Prisma ORM）をデータベースとして使用。
# 技術スタック
- ランタイム: Node.js 22 LTS
- フレームワーク: Express 5.x
- 言語: TypeScript 5.x（strict モード）
- ORM: Prisma
- バリデーション: zod
- テスト: Vitest + Supertest
# ディレクトリ構成
- src/routes/ : Expressルーター（リソースごとに分割）
- src/controllers/ : リクエスト処理・レスポンス返却
- src/services/ : ビジネスロジック
- src/models/ : Prisma スキーマ・型定義
- src/middleware/ : 認証・バリデーション等
- src/utils/ : 共通ユーティリティ
# コーディング規約
- ルーターは RESTful に設計（GET/POST/PUT/DELETE）
- コントローラーはビジネスロジックを持たない（services に委譲）
- すべての入力値を zod でバリデーション
- エラーはカスタム AppError クラスで統一
- 非同期処理は async/await を使う（Promise.then() 禁止）
# セキュリティ規約
- SQL インジェクション対策: Prisma の parameterized queries を使う
- 認証: JWT（express-jwt）
- CORS: cors ミドルウェアで制限
- 環境変数: process.env から直接使わず、src/config.ts 経由で使う
- パスワード: bcrypt でハッシュ化（平文保存禁止）
# エラーハンドリング
- すべての async 関数は try/catch で囲む
- HTTP ステータスコードを適切に使う（200/201/400/401/403/404/500）
- エラーレスポンスは { error: string, details?: unknown } 形式
# 禁止事項
- any 型の使用
- eval() の使用
- SQL の直接文字列結合（インジェクション対策のため）
- 環境変数をハードコード
- console.log を本番コードに残す（logger を使うこと）
【コピペOK】TypeScript 厳格設定用テンプレート
型安全性を最大化したいプロジェクト向けのテンプレートです。
# TypeScript 厳格モード設定
このプロジェクトはTypeScriptの厳格設定を使用します。
# tsconfig.json の主要設定
- strict: true（全strict系オプションを有効化）
- noImplicitAny: true
- strictNullChecks: true
- noUncheckedIndexedAccess: true（配列アクセスにundefinedを考慮）
# 型定義の規約
## 基本方針
- any の使用を完全禁止。unknown を使い、型ガードで絞り込む
- as によるキャストは最終手段。可能な限り型ガードを使う
- 関数の引数・戻り値の型は必ず明示する
## Union Type vs Enum
- enum は使わない（const assertion または Union Type を使う）
- 良い例: type Status = "pending" | "active" | "deleted"
- 悪い例: enum Status { Pending, Active, Deleted }
## Null 安全性
- null と undefined を厳密に区別する
- null: 意図的な「値なし」（DBのNULLなど）
- undefined: 「まだ設定されていない」「オプショナル」
- ?? と ?. を積極的に使う
## ジェネリクス
- 再利用可能な関数にはジェネリクスを使う
- 良い例: function getFirst<T>(array: T[]): T | undefined
- 型引数名: T（汎用）、TKey/TValue（オブジェクト）、TProps（Reactコンポーネント）
## 型ガード
- isXxx という命名で型ガード関数を定義する
- 良い例: function isUser(value: unknown): value is User
# インポート規約
- 型のみのインポートには import type を使う
- 良い例: import type { User } from "@/types"
- パスエイリアス: @/ でsrcルートを指す
# 禁止事項
- any の使用（eslint-disable でのスキップも禁止）
- // @ts-ignore の使用（// @ts-expect-error に変える）
- Object 型・{} 型の使用（具体的な型を定義する）
- Function 型の使用（具体的な関数シグネチャを書く）
チームでの .cursorrules 共有方法（Git管理のコツ）
.cursorrules はチーム全員が同じルールでAIを使えるよう、Git で管理するのが最善です。
Git に含める設定
# .gitignore には .cursorrules を含めない
# （デフォルトでは無視されないので特に設定不要）
# 確認コマンド
git status .cursorrules
# → .cursorrules が tracked になっていることを確認チーム運用のベストプラクティス
1. ルールの変更はプルリクエストで
# ブランチを作って提案
git checkout -b update-cursorrules
# .cursorrules を編集
git add .cursorrules
git commit -m "feat: .cursorrulesにAPIルール追加"
git push origin update-cursorrules
# PRを作ってレビュー → マージ2. README にルール変更の方法を記載
## AI コーディングルール
このプロジェクトでは `.cursorrules` を使って Cursor AI のルールを管理しています。
ルールを変更する場合は PR を作成してチームレビューを受けてください。3. 個人用ルールはローカル設定で追加
プロジェクト共通の .cursorrules とは別に、個人的なスタイル設定は Cursor の Settings（~/.cursor/settings.json）に追加することで、プロジェクト設定を汚さずにカスタマイズできます。
CLAUDE.md（Claude Code）との使い分け
Claude Code にも同様の機能として CLAUDE.md があります。両者の違いを理解して使い分けましょう。
| 項目 | .cursorrules | CLAUDE.md |
|---|---|---|
| 対象ツール | Cursor AI | Claude Code |
| ファイル形式 | プレーンテキスト | Markdown |
| 配置場所 | プロジェクトルート | プロジェクトルート / ~/ |
| 主な用途 | コーディングスタイル・命名規則 | プロジェクト全体の指示・禁止事項 |
| 階層設定 | 非対応 | 対応（ディレクトリごとに設定可能） |
| チーム共有 | Git で管理 | Git で管理 |
両方使う場合の役割分担
Claude Code と Cursor を併用しているチームでは、内容を共有しながら両ファイルを維持するのがおすすめです。
.cursorrules → Cursor 固有の UI 操作・コンポーネント生成ルール
CLAUDE.md → Claude Code 固有のターミナル操作・自動化ルール
共通ルール → 両ファイルに同じ内容を記載（命名規則・禁止事項等）
Cursor の使い方全体については、Cursor AI 完全ガイド もあわせてご覧ください。
よくあるミスと改善パターン
ミス 1：ルールが多すぎる（2000文字超）
# ❌ 悪い例（長すぎて AI が認識しきれない）
TypeScriptのstrictモードを使用し、anyは禁止です。また変数名は...
（延々と続く1000行のルール）
# ✅ 良い例（重要ルールに絞る）
- TypeScript strict モード必須
- any 禁止（unknown を使う）
- 関数コンポーネントのみ
- fetch を使う（axios 禁止）
ミス 2：抽象的すぎる表現
# ❌ 悪い例
クリーンなコードを書いてください。
# ✅ 良い例
- 関数は1つの責任のみ持つ（20行以内を目安）
- マジックナンバーは定数に抽出する
ミス 3：バージョンを書かない
# ❌ 悪い例
React を使用します。
# ✅ 良い例
React 19 + Next.js 16（App Router）を使用します。
ミス 4：チームで共有していない
.cursorrules を個人の .gitignore に入れてしまい、チーム全員にルールが伝わっていないケース。必ず Git で管理してチーム共有しましょう。
まとめ
.cursorrules は一度書けば永続的に効果を発揮する「AIへの設定書」です。
| やること | 効果 |
|---|---|
| 技術スタックを明記 | 適切なバージョンのAPIでコード生成 |
| 命名規則を指定 | 一貫したコーディングスタイル |
| 禁止事項を書く | any型・非推奨パターンを自動回避 |
| Git で管理 | チーム全員が同じAIルールで開発 |
まず試すべきテンプレート：
- Next.js プロジェクト → 上記の React/Next.js テンプレートをそのままコピー
- Node.js API → Node.js/Express テンプレートをコピー
- 型安全を重視 → TypeScript 厳格設定テンプレートを追加
Cursor 全体の使い方については Cursor AI 完全ガイド を、Claude Code との比較は AIコーディングツール完全比較 2026 をご覧ください。