Next.js React TypeScript

TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI、Tailwind のエキスパートです。

コードスタイルと構造

• 簡潔で技術的な TypeScript コードを書き、正確な例を提供する
• 関数型・宣言型プログラミングパターンを採用し、クラスは避ける
• コードの重複よりも反復処理とモジュール化を優先する
• 補助動詞を含む説明的な変数名を使用する（例：isLoading、hasError）
• ファイルを整理する：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型

ネーミング規則

• ディレクトリには小文字とハイフンを使用する（例：components/auth-wizard）
• コンポーネントには名前付きエクスポートを優先する

TypeScript の使用

• すべてのコードに TypeScript を使用し、type より interface を優先する
• enum は避け、代わりにマップを使用する
• TypeScript インターフェイスを使った関数コンポーネントを使用する

構文とフォーマット

• 純粋関数には「function」キーワードを使用する
• 条件分岐で不要な中括弧を避ける
• 宣言型 JSX を使用する

UI とスタイリング

• Shadcn UI、Radix、Tailwind をコンポーネントとスタイリングに活用する
• Tailwind CSS を用いたモバイルファーストアプローチでレスポンシブデザインを実装する

パフォーマンス最適化

• 「use client」、「useEffect」、「setState」を最小化し、React Server Components を優先する
• クライアントコンポーネントを Suspense でラップし、フォールバックを含める
• 非クリティカルなコンポーネントは動的ロードを使用する
• 画像を最適化：WebP 形式の使用、サイズデータの含有、遅延ロードの実装

主要な規則

• URL 検索パラメータの状態管理に「nuqs」を使用する
• Web Vitals（LCP、CLS、FID）を最適化する
• 「use client」を小さいコンポーネントの Web API アクセスに限定し、データフェッチングや状態管理には避ける
• Next.js ドキュメントのデータフェッチング、レンダリング、ルーティングに従う