Next.js道場このサイトについて
Next.js道場は、App Router を解説と問題の両方で学ぶ日本語のサイトです。
何をするサイトか
Next.js でつまずくところは、用語を知らないことではなく、「この要件のとき、どれを使えばいいのか」が判断できないことに集中しています。このサイトは、その判断を何度でも練習できる場所を目指しています。
読むだけで終わらせないため、すべての解説の末尾に、その場で解ける問題を置いています。
前提にしていること
このサイトはReact を書いたことがある人を対象にしています。useState・props・コンポーネントという言葉が出てきても、そこで手が止まらない状態です。
React そのものや JavaScript の基礎は扱いません。そこは公式の教材が厚く、日本語でも揃っています。このサイトが引き受けるのは、その先にある「サーバーとブラウザのどちらで動くのか」という判断だけです。
まだ React を書いたことがないなら、React の公式チュートリアル（日本語）を先に通してください。JavaScript そのものが不安なら、MDN の JavaScriptが出発点になります。遠回りに見えて、こちらを先にやったほうが速いです。
情報の扱い
| 項目 | やる | やらない |
|---|---|---|
| 出典 | 公式ドキュメント・公式ブログ・React 公式・MDN・標準仕様 | 個人ブログ・二次情報を根拠にする |
| 日付 | そのバージョンで実際に確かめた日を出す | 更新のたびに今日の日付にする |
| コード | 実際の Next.js 16.3.5 でビルドして確かめる | 記憶や他所の記事から書き写す |
| 食い違い | 解説のほうを直す | 実物に合わせて説明をぼかす |
どうやって確かめているか
エラーの文言や「このコードはどうなるか」を、記憶や他所の記事から書き写していません。問題に載せたコードを本物の Next.js 16.3.5 でビルドし、宣言した結果になるかを毎回照合しています。食い違ったら公開できません。
- 問題とコードを書く
「このコードはこうなる」という主張を、機械が読める形で一緒に書く。
- 本物の Next.js でビルドする
宣言した結果（通る・落ちる・成果物に含まれる）になるかを、16.3.5 で実際に確かめる。
- 食い違ったら公開しない
直すのは解説のほう。検証を通っていないものはビルドが止めるので、公開できない。
この仕組みで実際に何度も間違いが見つかっています。たとえば、広く書かれている「エラーの文言」が現在のバージョンでは別の文だったこと、「NEXT_PUBLIC_ が付いていない環境変数はブラウザに出ない」という説明が、プリレンダーされた HTML では成立しないこと。どちらも実物を見るまで気づけませんでした。
いま扱っている範囲
中心は Server Component と Client Component の境界です。ここは Next.js でつまずく場所が集中していて、しかも「動いてしまうから気づけない」種類の誤りが多いところです。
そこから、キャッシュ・ルーティング・エラー画面・環境変数・デプロイまで、同じやり方で実機に当てて広げています。Pages Router からの移行は、まだ扱っていません。手を広げて薄くするより、1つずつ確実に頼れるほうが役に立つと考えています。
広告について
| 画面 | 広告 | なぜ |
|---|---|---|
| 解説・エラー辞典 | 出す | 読み物なので、読む流れを切らない位置に出る |
| 問題を解いている最中 | 出さない | 判断の邪魔になる |
| 記録・ログイン | 出さない | 読み物ではない |
広告の有無で解説の内容を変えることはありません。 Cookie の扱いはプライバシーポリシーに書いています。
間違いを見つけたら
お問い合わせから教えてください。どのページのどの記述かを書いていただけると助かります。
資格ではありません
このサイトの問題やテストは、公的な資格や認定とは一切関係のない、独自のものです。結果が何かを証明するものではありません。
商標について
Next.js は Vercel, Inc. の商標です。当サイトは Vercel, Inc. と提携していません。