Zenn
🙆

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

2025/03/22に公開
2
Next.js
TypeScript
Cursor
roocode
cursorrule
tech

こんにちは、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

📄 ファイル内の並び順

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

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

2

Discussion