Next.js は『React アプリの事実上の標準フレームワーク』
Next.js は、React をベースに本番運用に必要な機能（ルーティング・SSR・SSG・画像最適化等）を統合したフレームワークで、個人開発から大企業まで広く採用されています。App Router の登場で書き方が大きく変わり、React Server Components（RSC）の理解が中核になっています。本記事では、Next.js を効率的に学ぶロードマップ、つまずきポイントを編集部の視点で整理します。学習進度は個人により異なります。
なぜ Next.js を学ぶか
(1) 本番運用の機能が標準装備：ルーティング・SSR・画像最適化。(2) 求人需要：モダンフロントの第一選択。(3) Vercel との親和性：デプロイが圧倒的に楽。(4) パフォーマンス：エッジ・ストリーミング対応。(5) 大規模事例の蓄積：ベストプラクティスが確立。未経験からフロントエンドエンジニア もご参考に。
前提知識
(1) HTML/CSS：基礎が固まっていること。(2) JavaScript（ES6+）：分割代入・promise・async/await。(3) React 基礎：コンポーネント・props・state・hooks。(4) TypeScript：型ヒントの読み書き。(5) Web の基礎：HTTP・DNS・ブラウザ。TypeScript学習、Webの基礎を学ぶロードマップ もご参考に。
学習ロードマップ（2〜4ヶ月）
(1) 第1段階：App Router の基本：app/ ディレクトリ・layout.tsx・page.tsx。(2) 第2段階：Server / Client Components：境界の理解。(3) 第3段階：データ取得：fetch・cache・revalidate・Server Actions。(4) 第4段階：ルーティング：動的ルート・並列ルート・インターセプト。(5) 第5段階：API ルート：Route Handlers・Server Actions。(6) 第6段階：本番運用：ISR・キャッシュ戦略・パフォーマンス。Vercel活用ガイド もご参考に。
App Router で押さえるべき重要概念
(1) Server Components の既定：明示しない限り Server。(2) 'use client' の境界：useState 等を使う時のみ宣言。(3) Streaming と Suspense：段階的レンダリング。(4) fetch のキャッシュ：Next.js が拡張した fetch の挙動。(5) Server Actions：フォーム処理の新しい書き方。Pages Router からの移行組は最初混乱しがちですが、原理を掴むと書き味が大きく改善します。
典型的なプロジェクト構成
(1) app/ ディレクトリ：ルーティングと UI。(2) components/：共通コンポーネント。(3) lib/：ユーティリティ・データアクセス。(4) types/：共通型。(5) public/：静的アセット。GitHubポートフォリオの作り方 もご参考に。
状態管理とデータフェッチ
(1) Server 側でのデータ取得を優先：クライアント JS を減らす。(2) クライアント状態は最小限：URL・サーバ・ストアの優先順位。(3) React Query / SWR：必要に応じてクライアント側キャッシュ。(4) Zustand / Jotai：軽量グローバル状態。(5) Server Actions：フォーム＋更新の組み合わせ。Supabase活用ガイド もご参考に。
失敗しがちなパターン
(1) 'use client' を全部に付ける：Server Components の利点を失う。(2) キャッシュの仕様を誤解：データが更新されない。(3) 巨大なバンドル：クライアント JS を増やしすぎる。(4) パフォーマンス計測なし：Core Web Vitals を見ない。(5) Pages Router の経験を持ち込みすぎ：App Router の流儀を学ぶ。対策は、(1)Server first、(2)cache 仕様の理解、(3)bundle 監視、(4)Web Vitals 計測、(5)新流儀の習得、です。IT・Web業界の職種完全マップ もご活用ください。