Cursor × Next.js 開発を加速する【.cursorrules】公開🚀

こんにちは、KoenigWolf です。  
今回は、僕が**Cursor + Next.js + shadcn/ui**でプロジェクトを爆速構築する際に使っている **.cursorrules（コーディングルール）** をまるっと公開します！

> ✅ 実装が速くなる  
> ✅ チームでも読みやすい  
> ✅ パフォーマンスとUXも落ちない

そんなルールを1つずつ丁寧に解説していきます。  
**Next.js App Router × Tailwind × shadcn/ui + TypeScript**の構成を使っている方は、ぜひ参考にしてください！

---

## ✅ 技術スタック（Stack）

まずはベースとなる技術構成です。

| 技術          | 目的                           |
|---------------|--------------------------------|
| Next.js       | App Router を利用したモダンなページ構成 |
| TailwindCSS   | 高速で柔軟なユーティリティスタイリング |
| shadcn/ui     | 実務品質の再利用可能 UI コンポーネント |
| Framer Motion | アニメーション / 遷移演出               |

📘 **ドキュメントリンク集**  
- [Next.js App Router](https://nextjs.org/docs/app)  
- [TailwindCSS](https://tailwindcss.com/docs)  
- [shadcn/ui](https://ui.shadcn.com/docs)  
- [Framer Motion](https://www.framer.com/motion/)

---

## 🧱 フォルダとファイル構成ルール

### 📂 ディレクトリ構成

```
src/
├── app/                  # Next.js App Router entry
├── components/           # UIコンポーネント
├── hooks/                # 再利用可能なカスタムフック
├── utils/                # 汎用関数
├── lib/                  # APIや外部連携
├── types/                # 型定義
└── styles/               # Tailwind config or global.css
```

### 📄 ファイル内の並び順

1. Exported component  
2. Subcomponents  
3. Helper functions  
4. Static data  
5. Type definitions

---

## 🔤 命名規則まとめ

| 種類              | 命名規則    | 例                 |
|-------------------|-------------|--------------------|
| ディレクトリ      | kebab-case  | `components/auth-form` |
| コンポーネント    | PascalCase  | `UserCard.tsx`     |
| カスタムフック    | `use`接頭語 + camelCase | `useThemeState` |
| 変数・関数        | camelCase   | `handleSubmit`, `isLoading` |
| 型・インターフェース | PascalCase | `User`, `PostItem` |

💡 **default exportは禁止** → `export const`で統一。

---

## 🛡 TypeScript設計ルール

- `interface` → オブジェクト構造に使用  
- `type` → ユニオン型・プリミティブ型に使用  
- Propsの定義は `interface Props` を使用  
- カスタムフックはジェネリクス対応を意識（例：`useFetch<T>()`）

```ts
interface User {
  id: string
  name: string
}

type ID = string | number
```

---

## 💬 コメント設計

- 自明なコードにはコメント不要
- 意図がわかりづらい部分には **1行で理由を書く**

```ts
// ログイン中のユーザー情報を取得し、キャッシュ
```

---

## 🎨 UI & スタイリング

- **TailwindCSS を第一選択肢**として使う  
- **shadcn/ui + Radix UI** でアクセシブルで美しいUIを作る  
- カスタマイズは `className` と `cn()` を使う  
- レスポンシブはモバイルファーストで設計する

```tsx
import { cn } from "@/lib/utils"

<Button className={cn("text-white", isActive && "bg-primary")} />
```

---

## 🚀 パフォーマンス最適化ルール

### ✅ 使用方針まとめ

- React Server Components（RSC）を優先
- `"use client"` は必要最小限に
- モーダル、グラフなどは `dynamic()` + `Suspense` で遅延読み込み
- 再レンダリング防止に `useMemo`, `useCallback` を適切に使う
- URL 検索パラメータには `nuqs` を使用
- 画像は Next.js の `<Image />` コンポーネントを使い、WebP、lazy loading で最適化

```tsx
import Image from "next/image"

<Image
  src="/hero.webp"
  alt="Hero Image"
  width={800}
  height={600}
  priority
/>
```

---

## 🌐 Web Vitals & アクセシビリティ

### パフォーマンス指標（Web Vitals）

- **LCP**（Largest Contentful Paint）→ 初期描画を早く  
- **CLS**（Cumulative Layout Shift）→ レイアウトのズレを防止  
- **FID**（First Input Delay）→ 初回のレスポンス速度

### アクセシビリティ対応

- `aria-*` 属性で明示的なラベル付けを行う
- キーボードナビゲーション・フォーカス制御を確保
- shadcn/ui + Radix UI の組み合わせで自動的に高水準の a11y が担保される

---

## ✅ ベストプラクティスまとめ

- default export 禁止、すべて named export
- dynamic import で非重要 UI を遅延読み込み
- use client の使いすぎ注意（パフォーマンス悪化）
- コメントは意図を残すために使う
- レンダリング戦略を SSR / ISR / SSG で使い分ける

---

## おわりに

このルールは「美しいコードを書く」ためのものではなく、**「誰が読んでも迷わず、安心して開発を進められる環境を作る」ためのルール**です。

Cursorユーザー、Next.js開発者、そして「shadcn/uiって実際どう使えばいいの？」という方は、ぜひ `.cursorrules` やチームのドキュメントに取り入れてみてください。

---

📂 `.cursorrules` テンプレートが欲しい方は [[.cursorrules](https://github.com/KoenigWolf/.cursorrules.git)]で共有しています。

質問・相談はお気軽にどうぞ！