Next.js (App Router)

Note

本コースは Next.js 公式の「App Router (Dashboard App)」を日本語訳し，再構成したものです。原著の著作権は Vercel 社に帰属します。画面イメージも原著から引用しています。

React コースを完走したあなたが，フルスタック開発へ一歩踏み出すためのコースです。団体管理システム「Happa」では App Router を採用しているため，開発・運用に携わるメンバーはこのコースの内容を前提として進みます。一方で，大学祭ホームページは従来の Pages Router で構築しているため，そちらに専念する場合は任意受講でも問題ありません。

作るもの

（デスクトップ版とモバイル版のダッシュボードのスクリーンショット）

全 16 章を通して，次の機能を備えた 財務ダッシュボード（financial dashboard） を完成させます。

公開用のホームページ
ログインページ
認証で保護されたダッシュボード
請求書（invoice）の追加・編集・削除といった CRUD 機能

後半の章では，Vercel 上の Postgres と接続した データベース も構築します。コース修了時には，フルスタック Next.js アプリを組み立てるための実践的な筋力が身についているはずです。

ここで身につくこと

App Router のレイアウト設計とファイルシステムルーティング
next/font・next/image などを活用したビルド時最適化
Server Components / Client Components を踏まえたデータ取得とキャッシュ戦略
URL クエリを利用した検索・ページネーション
React Server Actions を使ったサーバーサイドでのデータ更新と再検証
Suspense・Error Boundaries によるストリーミングとエラーハンドリング
Auth.js による認証導入とミドルウェア制御
メタデータやアクセシビリティといったプロダクション品質への配慮

受講前提とおすすめの進め方

React コースの内容を一通り体験していることを前提にしています。コンポーネント・Props・State・Hooks，そして Server Components / Suspense の基本が押さえられているとスムーズです。
Web 開発の一般的な知識も補足しながら解説しますが，データベースや認証は初学者向けに順を追って扱います。
実際の現場と同様に，既存のスターターリポジトリから読み解きながら機能を追加していきます。読む → 動かす → 次章へ進む，の流れを意識しましょう。

必要な環境

Node.js 18.18.0 以上（公式サイト)
対応 OS：macOS / Windows（WSL を含む）/ Linux
GitHub アカウント と Vercel アカウント
パッケージマネージャーは pnpm 推奨です。npm や yarn でも動作しますが，学習では pnpm を使って進めます。

学習のながれ

Chapter 1-5：プロジェクトのセットアップと UI のベースづくり
App Router のファイル構成を理解しつつ，スタイリングやルーティングを固めます。
Chapter 6-9：データベース接続とレンダリング戦略
Server Components でのデータ取得，静的／動的レンダリング，ストリーミングを体験します。
Chapter 10-13：最新機能と例外処理
Partial Prerendering やエラー処理など，プロダクション運用を意識した実装に踏み込みます。
Chapter 14-16：品質向上と体験設計
アクセシビリティ・認証・メタデータを整備し，公開に耐えるアプリに仕上げます。

準備が整ったら Chapter 1: App Routerを始めようからスタートしましょう。