こんにちは、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]で共有しています。
質問・相談はお気軽にどうぞ！