| name | Applying Next.js Basic Principles |
| description | Apply Next.js design principles and best practices for App Router, Server Components, caching strategies, and modern patterns including Next.js 16 updates. Use when building Next.js applications, implementing features, reviewing architecture, migrating to Next.js 16, or when the user mentions Next.js development, components, routing, optimization, or version updates. |
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 アップデート
2025年10月21日リリースの最新版への対応
- 破壊的変更: 非同期params/searchParams、Node.js 20.9以上必須
- 新機能: "use cache"ディレクティブ、updateTag() API、Turbopack標準化
- 移行戦略: 段階的なアップグレード手順
📚 『Next.jsの考え方』の構成
Server Componentsの基本原則と効率的なデータ取得パターン
- Server Componentsの本質
- Request Memoization（リクエストメモ化）
- 並行フェッチとインタラクティブフェッチ
- データローダーパターン
- コロケーション（Colocation）
Client Components設計とパフォーマンス最適化
- Client Componentsのユースケース
- Composition Pattern
- Container/Presentational Pattern
- Container First Design
- バンドル境界の最適化
Next.jsの多層キャッシング戦略
- Static Rendering / Full Route Cache
- Dynamic Rendering / Data Cache
- Router Cache
- Dynamic I/O
- データ更新戦略
パフォーマンス向上のための高度な技術
- Pure Server Components
- Suspense & Streaming
- Partial Pre-Rendering (PPR)
実践的な実装パターン
- 認証実装パターン
- Request Ref パターン
- エラーハンドリング戦略
✅ 実装チェックリスト
新しいNext.js機能を実装する際は、以下の順序で確認：
1. コンポーネント設計
2. データフェッチング
3. キャッシング戦略
4. パフォーマンス最適化
🚀 実装例
具体的な実装例は examples.md を参照してください。
📖 詳細ガイド
タスク別の詳細な実装ガイドは implementation-guide.md を参照してください。
🔗 参考リンク
