2.3 KiB
2.3 KiB
| description | applyTo |
|---|---|
| Next.js + Tailwind開発標準と指針 | **/*.tsx, **/*.ts, **/*.jsx, **/*.js, **/*.css |
Next.js + Tailwind開発指針
Tailwind CSSスタイリングとTypeScriptを使用した高品質なNext.jsアプリケーションの指針。
プロジェクトコンテキスト
- 最新のNext.js（App Router）
- 型安全のためのTypeScript
- スタイリングのためのTailwind CSS
開発標準
アーキテクチャ
- サーバーとクライアントコンポーネントを使用したApp Router
- 機能/ドメインごとにルートをグループ化
- 適切なエラーバウンダリを実装
- デフォルトでReact Server Componentsを使用
- 可能な場所で静的最適化を活用
TypeScript
- strictモードを有効化
- 明確な型定義
- 型ガードを使用した適切なエラーハンドリング
- 実行時型検証のためのZod
スタイリング
- 一貫したカラーパレットでのTailwind CSS
- レスポンシブデザインパターン
- ダークモードサポート
- コンテナクエリのベストプラクティスに従う
- セマンティックなHTML構造を維持
状態管理
- サーバー状態にはReact Server Components
- クライアント状態にはReactフック
- 適切なローディングとエラー状態
- 適切な場所での楽観的更新
データフェッチング
- 直接データベースクエリにはServer Components
- ローディング状態にはReact Suspense
- 適切なエラーハンドリングと再試行ロジック
- キャッシュ無効化戦略
セキュリティ
- 入力検証とサニタイゼーション
- 適切な認証チェック
- CSRF保護
- レート制限実装
- セキュアなAPIルートハンドリング
パフォーマンス
- next/imageによる画像最適化
- next/fontによるフォント最適化
- ルート事前読み込み
- 適切なコード分割
- バンドルサイズ最適化
実装プロセス
- コンポーネント階層を計画
- 型とインタフェースを定義
- サーバーサイドロジックを実装
- クライアントコンポーネントを構築
- 適切なエラーハンドリングを追加
- レスポンシブスタイリングを実装
- ローディング状態を追加
- テストを作成