Next.js入門 — App Router編

Next.jsの概要、Guillermo Rauch（Vercel CEO）が開発した背景と動機、Reactとの違い、App RouterとPages Routerの比較、2024年以降に学ぶべき理由をまとめます。

Next.jsプロジェクトの作成から開発サーバーの起動まで、ステップバイステップで解説します。

Server ComponentsとClient Componentsの違いと使い分けを学びます。

Next.js App Routerのファイルベースルーティングの仕組みを、ページの作り方・特別なファイル名・Linkによる画面遷移まで実践的に解説します。

Next.js App Routerのlayout.tsxの役割、ルートレイアウトとネストレイアウト、再レンダリングされない仕組みとtemplate.tsxとの違いを解説します。

Next.js App Routerの動的ルーティング（[slug]）の作り方、async paramsの受け取り、generateStaticParamsによる静的生成、catch-allセグメントまでを解説します。

Next.js App Routerのデータ取得を、Server Componentでのfetch、キャッシュとrevalidate、静的・動的レンダリングの分かれ目、並列取得まで実践的に解説します。

Next.js App RouterのRoute Handlersを使い、app/api配下のroute.tsでGET・POST・PUT・DELETEを実装する方法、NextRequest・NextResponseの使い方、Server Actionsとの使い分けまで解説します。

Next.jsのproxy.ts（旧middleware.ts）を使い、リクエストがページやRoute Handlerに届く前に認証・リダイレクト・ヘッダー操作を行う方法、Edge RuntimeとNode.js Runtimeの違い、Next.js 16での名称変更を解説します。

Next.js App Routerのloading.tsx（読み込み中UI）、error.tsx（エラー画面）、not-found.tsx（404）の使い方とSuspenseの関係を実践的に解説します。

Next.js App RouterのMetadata APIを使い、title・descriptionの設定、generateMetadataによる動的メタデータ、OGP画像やtitleテンプレートまでSEOの実装を解説します。

Next.js App RouterのServer Actionsを使い、'use server'によるフォーム送信・データ更新、useActionStateやuseFormStatusでの状態管理、revalidatePathまで実践的に解説します。

Next.jsアプリを本番公開する方法を、Vercel・Node.jsサーバー・Docker・static export・Cloudflare Workersの違い、環境変数、ビルド、エッジ環境の注意点まで解説します。