majiayu000 Applying Next.js Basic Principles
このSkillは『Next.jsの考え方』（AkifumiSato著）に基づいて、Next.jsアプリケーション開発における設計原則とベストプラクティスを提供します。
🎯 発動タイミング
このSkillは以下の状況で自動的に発動します：
- Next.jsプロジェクトでの新機能実装時
- App Router / Pages Routerの設計・実装時
- Server Components / Client Componentsの使い分け判断時
- データフェッチング戦略の決定時
- キャッシング戦略の設計時
- パフォーマンス最適化の実施時
- エラーハンドリング・認証の実装時
- Next.js 16への移行・アップグレード時
🆕 Next.js 16 アップデート
Next.js 16 移行ガイド
2025年10月21日リリースの最新版への対応
- 破壊的変更: 非同期params/searchParams、Node.js 20.9以上必須
- 新機能: "use cache"ディレクティブ、updateTag() API、Turbopack標準化
- 移行戦略: 段階的なアップグレード手順
📚 『Next.jsの考え方』の構成
Part 1: サーバーコンポーネント基礎
Server Componentsの基本原則と効率的なデータ取得パターン
- Server Componentsの本質
- Request Memoization（リクエストメモ化）
- 並行フェッチとインタラクティブフェッチ
- データローダーパターン
- コロケーション（Colocation）
Part 2: クライアントコンポーネント戦略
Client Components設計とパフォーマンス最適化
- Client Componentsのユースケース
- Composition Pattern
- Container/Presentational Pattern
- Container First Design
- バンドル境界の最適化
Part 3: キャッシングと動的レンダリング
Next.jsの多層キャッシング戦略
- Static Rendering / Full Route Cache
- Dynamic Rendering / Data Cache
- Router Cache
- Dynamic I/O
- データ更新戦略
Part 4: レンダリング最適化
パフォーマンス向上のための高度な技術
- Pure Server Components
- Suspense & Streaming
- Partial Pre-Rendering (PPR)
Part 5: 実装技術とベストプラクティス
実践的な実装パターン
- 認証実装パターン
- Request Ref パターン
- エラーハンドリング戦略
✅ 実装チェックリスト
新しいNext.js機能を実装する際は、以下の順序で確認：
1. コンポーネント設計
- Server Component として実装可能か検討
- Client Component が必要な場合、最小限の範囲に限定
- Composition Pattern でコンポーネントを構成
- Next.js 16: params/searchParamsを非同期でアクセス
2. データフェッチング
- Server Component でのデータ取得を優先
- Request Memoization の活用
- 並行フェッチで効率化
- データローダーパターンの検討
3. キャッシング戦略
- Static Rendering が可能か検討
- Dynamic Rendering が必要な場合の最適化
- Router Cache の活用
- revalidate の適切な設定
- Next.js 16: "use cache"ディレクティブの活用検討
4. パフォーマンス最適化
- Suspense によるストリーミング
- Loading UI の実装
- Error Boundary の設置
- PPR の活用検討
- Next.js 16: Turbopack自動有効化の恩恵
🚀 実装例
具体的な実装例は examples.md を参照してください。
📖 詳細ガイド
タスク別の詳細な実装ガイドは implementation-guide.md を参照してください。