Next.js の学習ロードマップ

Server と Client の境界から始めて、キャッシュ・ルーティング・エラー画面・デプロイまで、読む順に並べています。境界が読めるようになると、ほかの話は全部つながります。

React を書いたことがある人を前提にしています。 React や JavaScript の基礎は扱いません。まだならこのサイトについてに出発点を書いています。

App Router とは何か。Pages Router との違いApp Router は、app フォルダの中のフォルダ名でパスが決まり、page という名前のファイルだけが画面になる、Next.js のいまの標準のルーターです。確認 3 問 →
App Router のディレクトリ構成の決め方App Router のディレクトリ構成は、部品も型もページと同じフォルダに置いてよく、アンダースコアで始まるフォルダはルーティングから完全に外れます。確認 3 問 →
Server Component とは何かServer Component は、サーバー側だけで実行され、その JavaScript がブラウザに送られない React コンポーネントです。確認 3 問 →
Client Component とは何かClient Component は、ファイルの先頭に use client と書くことでブラウザにも送られる React コンポーネントです。確認 3 問 →
use client はどこに書くのかuse client はファイルの先頭に一度だけ書き、そこから下のツリーを Client Component にするためのディレクティブです。確認 3 問 →
Server から Client へ渡せる props の値Server Component から Client Component へ渡せるのは値だけで、関数とクラスのインスタンスは渡せません。確認 3 問 →
RSC Payload とは。ブラウザに何が届くのかServer Component のコードはブラウザに届きませんが、Client Component へ渡した props は表示していなくても全部届きます。確認 3 問 →
Client Component の中に Server Component を置くClient Component の中に Server Component を置きたいときは、import ではなく children で渡します。確認 3 問 →
Hydration とは何かHydration は、サーバーが送った HTML に、ブラウザ側の React を接続して操作できるようにする処理です。確認 3 問 →
Server と Client の選び方迷ったら Server Component から書き始めて、状態やイベント、ブラウザ API が必要になった部分だけを Client Component へ切り出します。確認 3 問 →
server-only と client-only の使い方モジュールを間違った側から使わせないための印が server-only と client-only です。確認 3 問 →
Server Function の渡し方関数は Client Component に渡せませんが、use server を書いた Server Function だけは渡せます。確認 3 問 →
Server Actions の使い方。Server Function の呼び方Server Actions は、フォームの action に渡して呼ぶ Server Function のことで、これが基本の形です。確認 5 問 →
cookies の使い方。読める場所と書ける場所Next.js の cookies() は await して使い、読むのはサーバー側ならどこでもできますが、書けるのは Server Action と Route Handler だけです。確認 4 問 →
Next.js のキャッシュ。いつ描かれるのかNext.js のキャッシュは、そのページを事前に1枚作って全員に配るか、アクセスのたびに描くかの二択で、どちらになるかは何を使ったかで決まります。確認 3 問 →
revalidatePath の使い方。どこまで作り直されるかrevalidatePath は、ビルドのときに描いて保存してあるページを、次に開かれたときに描き直させます。確認 3 問 →
動的ルーティング。角括弧の3つの形動的ルーティングは、フォルダ名を角括弧で囲むとその部分が変数になる仕組みで、1つぶんを受ける形、1つ以上を受ける形、0個でもよい形の3つがあります。確認 3 問 →
useRouter の使い方。push・replace・refresh の違いApp Router の useRouter は next/navigation から読み込み、Client Component の中で使います。確認 3 問 →
redirect の使い分け。307 と 308、どこで転送するかNext.js の転送は、redirect・permanentRedirect・next.config の redirects・proxy の4つがあり、返す状態コードと動く時点が違います。確認 3 問 →
metadata の書き方と title の決まり方metadata は Server Component から出すもので、レイアウトに書いた title の template は下の階層にだけ掛かり、自分自身には掛かりません。確認 3 問 →
CSS が反映されないとき。どこで読み込むかNext.js の CSS は、それを import したページや layout を開いたときにだけ読み込まれます。確認 3 問 →
next/image の使い方。最適化の仕組みと Next.js 16 の既定next/image は、画像を自分のサーバーで画面の幅に合わせた大きさと画質に変えてから配る部品です。確認 4 問 →
エラー画面の作り方。error.tsx と global-errorerror.tsx は、ページで起きた例外を受け止めて、代わりの画面を出すファイルです。確認 5 問 →
not-found.tsx が効かないとき。404 の出し分けnot-found.tsx は、存在しない URL と notFound() を呼んだときとで、使われるものが違います。確認 3 問 →
proxy（旧 middleware）の書き方と、名前が変わった理由Next.js 16 では middleware という名前が非推奨になり、proxy という名前に変わりました。確認 3 問 →
Next.js のログイン。認証をどこで確かめるかNext.js のログインは、Cookie には鍵だけを入れ、誰なのかはページと Server Function がそれぞれサーバー側で確かめる形で作ります。確認 3 問 →
環境変数はいつ読まれるのか。ビルド時と実行時Next.js の環境変数は、ページがいつ描かれるかで、ビルド時に読まれるか実行時に読まれるかが決まります。確認 3 問 →
自分のサーバーに置く。standalone と Dockeroutput を standalone にすると、server.js だけで動く出力ができますが、.next/static と public は入りません。確認 3 問 →
Next.js 16 で変わったこと。上げると壊れる所Next.js 16 に上げると、params の読み方・revalidateTag の引数・middleware の名前・next.config の eslint・next/image の既定が変わります。確認 4 問 →