こんにちは、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	アニメーション / 遷移演出

📘 ドキュメントリンク集

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

📂 ディレクトリ構成

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

📄 ファイル内の並び順

Exported component
Subcomponents
Helper functions
Static data
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>()）

interface User {
  id: string
  name: string
}

type ID = string | number

💬 コメント設計

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

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

🎨 UI & スタイリング

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

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 で最適化

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]で共有しています。

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