Next.js App Router Best Practices
RSC 前提の設計を示すサンプルアプリケーション
サンプル機能
- Robots - CRUD + 一覧表示
Server Component でのデータ取得、Server Actions による更新
- Robots(ページネーション付き)
searchParams による URL ベースの状態管理
- 認証
Server Component での認証チェック、Server Actions によるログイン
設計思想
- Server Component がデフォルト
- Client Component は最後の手段
- データ取得はサーバーで完結
- useEffect は DOM が必要な場合のみ
- URL で状態管理(useState より searchParams)