nextjs-react-redux-typescript-cursor-rules

Next.js React Redux TypeScript Cursor ルール

Next.js、React、Redux Toolkit、TypeScript を使用して、保守性と拡張性に優れたアプリケーションを構築するための包括的な開発ガイドラインです。

開発の理念

• SOLID 原則に従い、保守性と拡張性に優れたコードを作成します
• 命令型のスタイルよりも、関数型および宣言型のアプローチを優先します
• 型安全性と静的解析を重視します
• コンポーネント駆動型のアーキテクチャを採用します

コードスタイルの基準

• インデント：タブを使用します
• 文字列：シングルクォートを使用します（エスケープが必要な場合を除く）
• セミコロン：曖昧さを解消する必要がある場合を除き、省略します
• 演算子：中置演算子の前後にスペースを入れます
• 関数：宣言時の括弧の前にスペースを入れます
• 等価比較：== よりも常に === を使用します
• 行の長さ：最大 80 文字です
• 条件文：複数行の if 文には波括弧を使用します
• コレクション：複数行の配列やオブジェクトでは末尾にカンマを付けます

命名規則

規則	用途
PascalCase	コンポーネント、型定義、インターフェース
kebab-case	ディレクトリ名とファイル名（例：user-profile.tsx）
camelCase	変数、関数、メソッド、フック、プロパティ、props
UPPERCASE	環境変数、定数、グローバル設定

接頭辞

• イベントハンドラー：handle（例：handleClick）
• ブール値：動詞を使用します（例：isLoading、hasError、canSubmit）
• カスタムフック：use（例：useAuth、useForm）

React のベストプラクティス

コンポーネント

• TypeScript のインターフェースを使った関数コンポーネントを使用します
• function キーワードでコンポーネントを定義します
• 再利用可能なロジックはカスタムフックに抽出します
• コンポジションパターンを適切に適用します
• React.memo() を適切に活用します
• useEffect フックでクリーンアップを実装します

パフォーマンス

• 関数のメモ化には useCallback を使用します
• コストの高い計算には useMemo を使用します
• JSX 内でのインライン関数定義は避けます
• 動的インポートによるコード分割を実装します
• リストでは適切な key props を使用します（インデックスは決して使用しません）

Next.js のベストプラクティス

コア

• ルーティングには App Router を使用します
• メタデータ管理を実装します
• 適切なキャッシュ戦略を適用します
• エラーバウンダリーを実装します

コンポーネント

• 組み込みコンポーネントを使用します：Image、Link、Script、Head
• ローディング状態を実装します
• 適切なデータ取得方法を使用します

サーバーコンポーネント

• デフォルトでサーバーコンポーネントを使用します
• サーバー状態には URL クエリパラメーターを使用します
• 次の場合に限り、use client を適用します：
  • イベントリスナー
  • ブラウザー API
  • 状態管理
  • クライアントライブラリ

TypeScript の実装

• 厳格モードを有効にします
• props、state、Redux の構造に対して明確なインターフェースを定義します
• undefined/null の安全性を確保するために型ガードを使用します
• 柔軟性を高めるためにジェネリクスを適用します
• ユーティリティ型（Partial、Pick、Omit）を活用します
• オブジェクトには type よりも interface を優先します
• 動的な型のバリエーションにはマップ型を使用します

UI とスタイリング

ライブラリ

• Shadcn UI：一貫性があり、アクセシブルなコンポーネント
• Radix UI：カスタマイズ可能なプリミティブ
• コンポジションパターン：モジュール性

スタイリング

• Tailwind CSS のユーティリティファーストアプローチ
• モバイルファーストのレスポンシブデザイン
• CSS 変数または Tailwind のダークモードによるダークモード対応
• アクセシブルな色のコントラスト比
• 一貫したスペーシング値
• テーマカラーには CSS 変数を使用します

状態管理

ローカル状態

• コンポーネントレベルの状態には useState
• 複雑な状態には useReducer
• 共有状態には useContext

グローバル状態（Redux Toolkit）

• 状態、reducer、action をまとめるには createSlice を使用します
• 状態の構造を正規化します
• アクセスをカプセル化するためにセレクターを使用します
• 機能ごとに関心事を分離します（モノリシックな slice は避けます）

エラー処理とバリデーション

フォーム

• スキーマのバリデーションには Zod を使用します
• React Hook Form と連携します
• 明確なエラーメッセージを表示します

エラーバウンダリー

• React ツリー内のエラーを捕捉し、適切に処理します
• 外部サービス（例：Sentry）にエラーを記録します
• ユーザーにわかりやすいフォールバック UI を表示します

テスト

単体テスト

• Jest と React Testing Library
• Arrange-Act-Assert パターン
• 外部依存関係と API 呼び出しをモックします

統合テスト

• ユーザーのワークフローに重点を置きます
• テスト環境を適切にセットアップ／ティアダウンします
• スナップショットテストは選択的に使用します
• テストユーティリティ（RTL の screen）を使用します

アクセシビリティ（a11y）

• セマンティック HTML
• 正確な ARIA 属性
• キーボードでの完全なナビゲーション
• 適切なフォーカス管理
• アクセシブルな色のコントラスト
• 論理的な見出し階層
• アクセシブルなインタラクティブ要素
• 明確なエラーフィードバック

セキュリティ

• XSS を防止するための入力サニタイズ
• HTML のサニタイズには DOMPurify を使用します
• 適切な認証方式

国際化（i18n）

• 翻訳には next-i18next を使用します
• ロケールの検出
• 数値と日付の書式設定
• RTL のサポート
• 通貨の書式設定

ドキュメント

• すべての公開関数、クラス、メソッド、インターフェースに JSDoc を記述します
• 適切な句読点を用いた完全文
• 明確で簡潔な説明
• 適切な Markdown、コードブロック、リンク、見出し、リスト
• 必要に応じて例を記載します