Next.js道場実戦学習 · App Router
その処理は、いつ、
どこで動くのか。
Next.js のつまずきは、ほぼ全部ここに集約されます。読んで分かった気になる前に、解いて確かめてください。
GET /products/42
Builddeploy 時に1度
generateStaticParams()人気100件を prerender
Serverアクセスの度に
cookies()db.item.findMany()RSC を stream
Browser利用者の手元で
hydrateカート追加ボタンが効くようになる
たとえば、こういう問いです
app/cart/page.tsx
Serverで実行
export default async function Page() {Serverで実行
const cart = await getCart()Serverで実行
const items = await db.item.findMany()Browserで実行
return <List items={items} onAdd={add} />Serverで実行
}このコードはそのまま動きますか。動かない場合、どこを直すのが適切ですか。
問題
155
解説
29
エラー
26
最小構成
8
実機検証
91%
この順に読むと、つながります
すべて見る →- 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 問 →
よく調べられているエラー
すべて見る →Error: Module not found: Can't resolve 'fs'
Import trace:
Server Component:
./app/view.tsx
./app/page.tsx
https://nextjs.org/docs/messages/module-not-found
Module not found: Can't resolve 'fs' の直し方確認 3 問 →Error: Cookies can only be modified in a Server Action or Route Handler.
Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#options
Cookies can only be modified の直し方確認 3 問 →Error: Route /[slug] used `cookies()` inside `generateStaticParams`. This is not supported because `generateStaticParams` runs at build time without an HTTP request. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context
generateStaticParams で cookies が使えない確認 3 問 →Error: You're importing a module that depends on `createContext` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
createContext を Server Component で使えない確認 3 問 →Error: Dynamic server usage: Route / couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
Dynamic server usage の読み方と消し方確認 3 問 →
これだけあれば動く、という形
すべて見る →app/layout.tsx app/page.tsx app/actions.ts app/done/page.tsx入出力の最小構成ファイル 4 個 →app/layout.tsx app/page.tsx app/actions.ts app/mypage/page.tsx app/session.tsログインの最小構成ファイル 5 個 →app/layout.tsx app/page.tsx app/[id]/page.tsx app/data.ts一覧と詳細の最小構成ファイル 4 個 →app/layout.tsx app/page.tsx app/SearchBox.tsx app/data.ts検索の最小構成ファイル 4 個 →app/layout.tsx app/page.tsx app/Form.tsx app/actions.tsアップロードの最小構成ファイル 4 個 →app/layout.tsx app/page.tsx app/actions.ts app/store.ts更新して作り直す最小構成ファイル 4 個 →app/layout.tsx app/page.tsx app/loading.tsx app/Slow.tsx app/data.ts待たせる画面の最小構成ファイル 5 個 →app/layout.tsx app/page.tsx app/[id]/page.tsx app/not-found.tsx app/error.tsx app/Boom.tsx404 とエラーの最小構成ファイル 6 個 →