Next.js道場Next.js の練習問題
正解だけを出す問題は置いていません。答えたあとに、なぜそうなるか・他の選択肢がなぜ違うか・実務ではどう扱うかまで出します。
一問一答21問コードを読まずに答える
- app/about フォルダを作り、その中に index.tsx を置きました。ビルドして /about を開くとどうなりますか。●●○○○→
- 型の誤りが残ったまま、急いで出す必要があり、next.config.ts にこの設定を書きました。ビルドはどうなりますか。●●○○○→
- 記事一覧に「前回開いた並び順を localStorage から読んで復元する」機能を足します。どこに書きますか。●○○○○→
- output を standalone にしてビルドし、.next/standalone だけをサーバーへ持っていきました。CSS や JavaScript のファイル（.next/static）は、その中に入っていますか。●●●○○→
- output を standalone にしたまま、いつもどおり next start で起動しました。どうなりますか。●●○○○→
- そのページでしか使わない部品を、app/about/Button.tsx としてページと同じフォルダに置きました。どうなりますか。●●○○○→
- 許可の設定が面倒なので、images.unoptimized を true にしました。出来あがった HTML の img は、どこから画像を読み込みますか。●●●○○→
- レイアウトに template 付きの title を書きました。トップページには title を書いていません。トップの title は何になりますか。●●●○○→
- 前から使っている middleware.ts をそのままにして Next.js 16 でビルドしました。どうなりますか。●●○○○→
- App Router で、何も書かずに作ったコンポーネントはどちらになりますか。●○○○○→
- use client の効果は、どちらの向きに広がりますか。●●○○○→
- Server Component のコードは、ブラウザに届きますか。●●○○○→
- Client Component に渡した props のうち、ブラウザに届くのはどれですか。●●○○○→
- use server は何を指示するものですか。●●○○○→
- モジュールの先頭に server-only を import しておくと、何が変わりますか。●○○○○→
- use client を書いたコンポーネントは、サーバーでは実行されませんか。●●○○○→
- そのページがビルド時に作られるかどうかは、何で決まりますか。●●○○○→
- Server Function を Client Component へ渡したとき、ブラウザに届くのは何ですか。●●○○○→
- Client Component の中で Server Component を import するのと、children で渡すのは何が違いますか。●●○○○→
- 1つのページの中で、Server Component と Client Component は共存できますか。●○○○○→
- URL を変えたので、古いページから新しいページへずっと転送したいです。permanentRedirect を使うと、何番の状態コードで転送されますか。●●○○○→
Server / Client 判定21問どちら側で動くかを判断する
- useActionState に渡した Server Function が実際に何を受け取るかを調べています。ブラウザから送信すると、戻り値はどうなりますか。●●●○○→
- このページには use client がありません。フォームの action に Server Function を渡しています。ビルドはどうなりますか。●●○○○→
- Modal は Client Component です。その children に置いた Cart は、どこで実行されますか。●●○○○→
- layout が Client Component の ThemeProvider で children を包んでいます。この page は Client Component になりますか。●●●○○→
- error.tsx には use client が要りました。同じ予約ファイルの loading.tsx にサーバー専用の印を付けると、ビルドはどうなりますか。●●○○○→
- 社内用の画面を app/_lib/page.tsx に置きました。フォルダ名をアンダースコアで始めてあります。誰かが /_lib を開けますか。●●●○○→
- 外部の画像を next/image で出しました。出来あがった HTML の img は、どこから画像を読み込むようになっていますか。●●○○○→
- ページ側で Cookie を読み、結果の文字列だけをボタンへ渡す形にしました。ビルドは通りますか。通るなら、このページは事前に描かれますか。●●●○○→
- await していない Promise を、そのまま Client Component へ渡しています。ビルドは通りますか。●●●●○→
- Money はメソッドを持つクラスです。このコードはどうなりますか。●●●○○→
- Date と Map を Client Component へ渡しています。このコードはどうなりますか。●●●○○→
- このページには use client がありません。どうなりますか。●●○○○→
- このファイルには use client がありません。どうなりますか。●●○○○→
- use client が付いた async のコンポーネントです。Next.js 16.3.5 でビルドするとどうなりますか。●●●●○→
- このコードはそのまま動きますか。動かない場合、どこを直すのが適切ですか。●●○○○→
- Panel の先頭に use client があります。ItemList はどこで実行されますか。●●○○○→
- Server Component から Client Component へ props として渡せないものを、すべて選んでください。●●●○○→
- Server Component の中で定義した関数を Client Component に渡しています。ビルドは通りますか。●●○○○→
- form の action に Server Function をそのまま渡しています。このページはビルドできますか。●●○○○→
- Counter は use client を書いた Client Component です。それを import しているこの page は Client Component になりますか。●●○○○→
- 外部の Gallery は useState を使っているのに use client が書かれていません。この包み方でビルドは通りますか。●●●○○→
レンダリング判定22問ビルド時か、リクエストごとか
- ページ a で ./a.css を import して、.accent に色を付けました。ページ b でも同じクラス名を使っています。/b を直接開くと、b の .accent に色は付きますか。●●●○○→
- m.module.css に .title を書いて import しました。className に文字列で "title" と書くと、色は付きますか。●●○○○→
- 全ページの見出しの色を変えたくて、ルートの layout で globals.css を import しました。/b を直接開くと、/b の h1 に色は付きますか。●●○○○→
- 記事ページを動的なパスで作りました。generateStaticParams は書いていません。このページはビルド時に描かれますか。●●●○○→
- Docker でビルドして動かしています。API_BASE はビルドのときには渡さず、実行するときにだけ docker run -e で渡しました。このページを開くと、何が表示されますか。●●●○○→
- データベースの失敗を画面に出したくて、error.tsx で error.message を表示しています。本番で、このページが例外を投げました。画面に出る error.message は何ですか。●●●○○→
- 本番でページが例外を投げ、画面には番号付きの決まった文言しか出ませんでした。throw した本当の文言は、どこで見られますか。●●○○○→
- app/shop/layout.tsx が例外を投げました。app/shop/error.tsx と app/error.tsx の両方があります。/shop を開くと、どちらのエラー画面が出ますか。●●●●○→
- ルートの layout（app/layout.tsx）が例外を投げました。app/error.tsx と app/global-error.tsx の両方があります。どちらが出ますか。●●●○○→
- 写真をきれいに出したくて、quality を 90 にしました。next.config.ts には images の設定を書いていません。出来上がった img は、どの画質の版を読み込みますか。●●●○○→
- shop 用の 404 画面を作りたくて、app/shop/not-found.tsx を置きました。app/not-found.tsx もあります。存在しない /shop/a/b を開くと、どちらが出ますか。●●●●○→
- 商品のページで、見つからないときに notFound() を呼んでいます。app/shop/not-found.tsx と app/not-found.tsx があります。/shop/zzz を開くと、どちらが出ますか。●●●○○→
- not-found.tsx を1つも置いていません。存在しない URL を開くと、何が出ますか。●●○○○→
- このページはビルド時に作られますか。それともリクエストごとに作られますか。●●○○○→
- 押せるボタンを置きました。このページはビルド時に作られなくなりますか。●●●○○→
- 検索語を searchParams から読んでいます。このページはビルド時に作られますか。●●●○○→
- 動的なものを何も読んでいませんが、1行だけ設定を足しました。このページはビルド時に作られますか。●●○○○→
- この一覧は動的なものを何も読んでいません。表示される件数は、いつ確定しますか。●●●○○→
- 60秒ごとに作り直す設定を足しました。このページはビルド時に作られますか。●●●○○→
- Cookie を読むのは Suspense で囲んだ中だけです。外側の静的な部分はプリレンダーされますか。●●●●○→
- 更新日として現在時刻を表示しています。この表示はいつの時刻になりますか。●●●○○→
- 検索語を読む部品を Suspense で囲んだらビルドが通りました。このページはビルド時にどこまで作られますか。●●●●○→
コード穴埋め6問空欄に入る1行を選ぶ
- この Counter をビルドが通る形にします。空欄に入るのはどれですか。●○○○○→
- save を Client Component へ渡せるようにします。空欄に入るのはどれですか。●●○○○→
- このモジュールが Client Component から呼ばれたら、ビルドで止めたい。空欄に入るのはどれですか。●●●○○→
- この Modal の中に Server Component を置けるようにします。空欄に入るのはどれですか。●●○○○→
- Profile は名前しか表示しません。見せてはいけない列を届けない書き方はどれですか。●●●○○→
- この関数を Client Component から import して呼べるようにし、かつ中身をブラウザに送りたくありません。空欄に入るのはどれですか。●●●○○→
バグ修正13問落ちているコードの直し方
- Cart は next/headers を使う Server Component です。このビルドエラーを、どう直すのが正しいですか。●●●○○→
- 一覧に並び替えを足したらビルドが落ちました。データの取得はこのページで行っています。どう直すのが正しいですか。●●○○○→
- use client を書いてあるのに、画面の幅を読むところでビルドが落ちます。どう直すのが正しいですか。●●●○○→
- 遅いので force-static を付けて速くしました。このページは Cookie からログイン名を読んでいます。何が起きますか。●●●●○→
- テーマを配りたくてページに Context を書いたら、ビルドが落ちました。どう直すのが正しいですか。●●●○○→
- use client を書いてあるのに、保存した設定を読むところでビルドが落ちます。どう直すのが正しいですか。●●●○○→
- window is not defined を避けるために typeof で分岐しました。これで直りますか。●●●○○→
- このページだけはサイト名を付けたくありません。レイアウトには template が書いてあります。どう書けば外せますか。●●●○○→
- /hello を開くと「slug=undefined」と出ます。「slug=hello」と出すには、ページをどう書き換えますか。●●○○○→
- 管理サービスが落ちているとビルドが止まるので、ページの先頭に1行足しました。ビルドするとどうなりますか。●●●○○→
- /about の下だけに掛けたくて matcher を書きました。先頭のスラッシュは省いています。ビルドするとどうなりますか。●●●○○→
- redirect が catch に拾われていたので、catch の先頭に1行足しました。ログインしていない人が開くと、どうなりますか。●●●○○→
- 事前に描こうとするのが原因なら、force-dynamic を付ければ止まらないはずだと考えました。ビルドするとどうなりますか。●●●●○→
エラー原因48問この文言はなぜ出たのか
- 送信中に文言を出すつもりで書きましたが、送信中も表示が変わりません。ボタンのほうは正しく無効になります。原因はどれですか。●●●●○→
- 追加した項目が一瞬だけ表示され、保存が終わると消えてしまいます。エラーは出ていません。原因はどれですか。●●●●○→
- Pages Router で作った pages/about.tsx が残っているところへ、app/about/page.tsx を足しました。ビルドするとどうなりますか。●●○○○→
- app/about/page.tsx がある状態で、同じフォルダに route.ts を足して JSON も返せるようにしました。ビルドするとどうなりますか。●●●○○→
- ログインしたら Cookie に鍵を入れたいので、ページの中で set しました。ビルドは通りました。このページを開くとどうなりますか。●●●○○→
- このページを、本番用にビルドしました。どうなりますか。●○○○○→
- 以前のプロジェクトから next.config.ts を写してきました。型チェックは有効です。ビルドするとどうなりますか。●●●○○→
- Cart は next/headers の cookies を使う Server Component です。この Modal をビルドするとどうなりますか。●●●○○→
- 押したら遷移させたくて useRouter を使いました。ビルドするとどうなりますか。●●○○○→
- 押せる部品があるページに title を付けたくて、この形にしました。ビルドするとどうなりますか。●●●○○→
- 詳細ページを事前に作りたくて generateStaticParams を書きました。ビルドするとどうなりますか。●●●○○→
- エラー画面を app/error.tsx に置きました。use client は書いていません。ビルドするとどうなりますか。●●○○○→
- 画面を返す関数を書いたら、意味の分からないエラーでビルドが落ちました。原因はどれですか。●○○○○→
- src/app へ移そうとして途中で止まり、ルート直下の app と src/app の両方がある状態になりました。src/app にしかないページはどうなりますか。●●●○○→
- 記事を slug で引くページがある場所に、id で引くページも足しました。どちらも /blog の直下です。ビルドするとどうなりますか。●●●○○→
- ドキュメントを app/docs/[...slug] で作り、トップの /docs も出したくて generateStaticParams に空の配列を混ぜました。ビルドするとどうなりますか。●●●●○→
- 言語ごとの記事ページを事前に作りたくて、Cookie に入っている言語を見て generateStaticParams を組み立てました。ビルドするとどうなりますか。●●●○○→
- use client が付いています。ブラウザで開くと何が起きますか。●●●○○→
- Hydration failed の原因になりうるものを、すべて選んでください。●●●○○→
- 時刻も乱数も使っていません。それでも hydration の不一致が出ます。原因はどれですか。●●●○○→
- 外部の画像を next/image で出しました。next.config.ts には何も書いていません。本番ビルドは通りました。本番で開くとどうなりますか。●●●○○→
- public に置いた画像を next/image で出しました。width と height は書いていません。型チェックは有効です。本番ビルドして開くと、どうなりますか。●●●○○→
- 画像を差し替えたときに古いものが残らないよう、src の後ろに ?v=1 を付けました。next.config.ts には images の設定を書いていません。ビルドするとどうなりますか。●●●○○→
- 問い合わせフォームで、送る前にメールアドレスの形を確かめたくなりました。メール送信のファイルに isEmail があったので、フォームから読み込みました。フォームが使っているのは isEmail だけです。ビルドするとどうなりますか。●●●○○→
- 古い記事を見ながら、動的なページを書きました。型チェックも有効にしてあります。本番ビルドして /hello を開くと、どうなりますか。●●●○○→
- 記事の管理サービスから本文を読むページです。ビルドのときに、その管理サービスが落ちていました。ビルドするとどうなりますか。●●●○○→
- proxy.ts を作って書き換えましたが、戻せるように middleware.ts も残しておきました。ビルドするとどうなりますか。●●○○○→
- ログインしていない人を /login に送りたいページです。ユーザーの取得は失敗することがあるので、try で囲みました。ログインしていない人が開くと、どうなりますか。●●●○○→
- 検索語を読むだけの小さな部品です。ページに置いたらビルドが失敗しました。原因はどれですか。●●●○○→
- Cookie が壊れていても落ちないように、読むところを try で囲みました。ビルドは通りましたが、ログに Error: Dynamic server usage と出ています。これは何ですか。●●●○○→
- このページは必ずビルドのときに描きたいので dynamic = 'error' を付けました。あとから Cookie でテーマを切り替える処理を足しました。ビルドするとどうなりますか。●●○○○→
- 以前の版で書いた Server Action を、Next.js 16 でビルドしました。型チェックは有効です。どうなりますか。●●●○○→
- 記事を管理する外のサービスから呼んでもらう、作り直しの入口を作りました。すぐに反映させたいので updateTag を使っています。この URL が呼ばれるとどうなりますか。●●●○○→
- ページを開くたびに最新の記事一覧を出したくて、ページの中で updateTag を呼びました。ビルドするとどうなりますか。●●●○○→
- ログインした人の記事一覧を出すページです。開くたびに記事のキャッシュを新しくしたくて、ページの中で revalidateTag を呼びました。ビルドは通りました。開くとどうなりますか。●●●○○→
- Pages Router で書いていた部品を、App Router のページに持ってきました。use client は付けてあります。ビルドするとどうなりますか。●●○○○→
- 今のパスを出したくて、ページで next/router を読み込みました。use client は付けていません。ビルドするとどうなりますか。●●○○○→
- NextRouter was not mounted と言われたので、import 元を next/navigation に変えました。型チェックは有効です。ビルドするとどうなりますか。●●●○○→
- 渡している props はプレーンな配列です。中の1つの値だけがクラスのインスタンスです。ビルドは通りますか。●●●●○→
- Symbol を Client Component に渡します。この書き方はビルドが通りますか。●●●●○→
- 金額の表示を部品ごとに変えたくて、整形する関数を props で渡しました。Price は use client を書いた部品です。ビルドするとどうなりますか。●●○○○→
- 一覧の各行の見た目をページ側で決めたくて、children に関数を書きました。List は use client を書いた部品です。ビルドするとどうなりますか。●●●○○→
- このファイルを別のコンポーネントから import してビルドすると、どうなりますか。●●●○○→
- このモジュールを Client Component から import すると何が起きますか。●●○○○→
- このモジュールを Server Component から import すると、どのタイミングで問題が表面化しますか。●●○○○→
- 静的なファイルだけで配りたくて、next.config.ts に output: 'export' を書きました。記事のページは動的なパスで作っています。ビルドするとどうなりますか。●●●○○→
- use client を import のあとに書きました。ビルドするとどうなりますか。●●○○○→
- フォームの送信先を作りました。中で待つ処理が無いので async を付けていません。ビルドするとどうなりますか。●●○○○→
コードレビュー18問渡してよいものかを見る
- ビルドは通りますが、ボタンを押すとサーバーが 500 を返します。原因になっている行を指摘してください。●●●●●→
- ページの先頭に use client を書きました。ここで使っている priceLabel のコードはブラウザに送られますか。●●●○○→
- 同じ画面を、押せるボタンだけ Client Component にして書き直しました。priceLabel のコードはブラウザに送られますか。●●●○○→
- NEXT_PUBLIC_ が付いた環境変数を Client Component で読みました。値はどこに入りますか。●●●○○→
- 保存した設定を復元しています。hydration の不一致になる行を指摘してください。●●●●○→
- suppressHydrationWarning を付けました。ブラウザのコンソールはどうなりますか。●●●●○→
- Chart は use client を書いた部品です。このページはビルドで落ちます。原因になっている行を指摘してください。●●●○○→
- Table は use client を書いた部品です。見せてはいけないものがブラウザに届く行を、すべて指摘してください。●●●●○→
- この画面で、ブラウザに不要なコードまで運んでいる原因の行を指摘してください。●●●○○→
- ADMIN_KEY は NEXT_PUBLIC_ が付いていない環境変数です。この値はブラウザから読めますか。●●●○○→
- 受け取る側は name しか使っていません。passwordHash はブラウザに届きますか。●●●○○→
- 今度は境界を越えず、Server Component の中だけで使っています。値はブラウザに届きますか。●●●○○→
- real と copied は同じ日付から作りました。受け取る側で扱いが変わるのはどちらですか。●●●●○→
- a の値は undefined です。受け取る側では、キーが無いのと undefined のどちらになりますか。●●●●○→
- この search を Client Component に props で渡します。関数の中身はブラウザに届きますか。●●●○○→
- この Server Function に足りない守りを、すべて選んでください。●●●●○→
- getAdminKey は NEXT_PUBLIC_ の付かない環境変数を読みます。この Panel を本番ビルドすると、ADMIN_KEY の値はどこに出ますか。●●●●○→
- Badge には use client を書いていません。この Panel から使うと、Badge のコードはブラウザに送られますか。●●●○○→
AI コードレビュー6問生成されたコードを点検する
- AI が書いたページです。Panel は use client を書いた部品です。指摘すべき点をすべて選んでください。●●●○○→
- AI が書いた部品です。ビルドが落ちる行と、サーバーでやるべき処理を書いている行を指摘してください。●●●●○→
- AI が書いた Server Function です。指摘すべき点をすべて選んでください。●●●●○→
- AI が書いた一覧ページです。このページがプリレンダーされなくなっている原因の行を指摘してください。●●●○○→
- AI が出した修正です。ビルドは通りますが、直し方として誤っている行を指摘してください。●●●●○→
- AI が書いたコードです。ビルドが落ちる行と、サーバーでやるべき処理を書いている行を指摘してください。●●●●○→