73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
---
|
||
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. テストを作成
|