---
description: 'Next.js + Tailwind開発標準と指針'
applyTo: '**/*.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によるフォント最適化
- ルート事前読み込み
- 適切なコード分割
- バンドルサイズ最適化

## 実装プロセス
1. コンポーネント階層を計画
2. 型とインタフェースを定義
3. サーバーサイドロジックを実装
4. クライアントコンポーネントを構築
5. 適切なエラーハンドリングを追加
6. レスポンシブスタイリングを実装
7. ローディング状態を追加
8. テストを作成