Next.js道場問題
正解だけを出す問題は置いていません。答えたあとに、なぜそうなるか・ 他の選択肢がなぜ違うか・実務ではどう扱うかまで出します。
一問一答12問
- 記事一覧に「前回開いた並び順を localStorage から読んで復元する」機能を足します。どこに書きますか。
- 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 は共存できますか。
Server / Client 判定15問
- Modal は Client Component です。その children に置いた Cart は、どこで実行されますか。
- layout が Client Component の ThemeProvider で children を包んでいます。この page は Client Component になりますか。
- await していない Promise を、そのまま Client Component へ渡しています。ビルドは通りますか。
- Money はメソッドを持つクラスです。このコードはどうなりますか。
- Date と Map を Client Component へ渡しています。このコードはどうなりますか。
- このページには use client がありません。どうなりますか。
- このファイルには use client がありません。どうなりますか。
- use client が付いた async のコンポーネントです。Next.js 16.3.3 でビルドするとどうなりますか。
- このコードはそのまま動きますか。動かない場合、どこを直すのが適切ですか。
- 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 が書かれていません。この包み方でビルドは通りますか。
レンダリング判定8問
- このページはビルド時に作られますか。それともリクエストごとに作られますか。
- 押せるボタンを置きました。このページはビルド時に作られなくなりますか。
- 検索語を searchParams から読んでいます。このページはビルド時に作られますか。
- 動的なものを何も読んでいませんが、1行だけ設定を足しました。このページはビルド時に作られますか。
- この一覧は動的なものを何も読んでいません。表示される件数は、いつ確定しますか。
- 60秒ごとに作り直す設定を足しました。このページはビルド時に作られますか。
- Cookie を読むのは Suspense で囲んだ中だけです。外側の静的な部分はプリレンダーされますか。
- 更新日として現在時刻を表示しています。この表示はいつの時刻になりますか。
コード穴埋め6問
- この Counter をビルドが通る形にします。空欄に入るのはどれですか。
- save を Client Component へ渡せるようにします。空欄に入るのはどれですか。
- このモジュールが Client Component から呼ばれたら、ビルドで止めたい。空欄に入るのはどれですか。
- この Modal の中に Server Component を置けるようにします。空欄に入るのはどれですか。
- Profile は名前しか表示しません。見せてはいけない列を届けない書き方はどれですか。
- この関数を Client Component から import して呼べるようにし、かつ中身をブラウザに送りたくありません。空欄に入るのはどれですか。
バグ修正5問
エラー原因14問
- Cart は next/headers の cookies を使う Server Component です。この Modal をビルドするとどうなりますか。
- 押したら遷移させたくて useRouter を使いました。ビルドするとどうなりますか。
- 押せる部品があるページに title を付けたくて、この形にしました。ビルドするとどうなりますか。
- 詳細ページを事前に作りたくて generateStaticParams を書きました。ビルドするとどうなりますか。
- エラー画面を app/error.tsx に置きました。use client は書いていません。ビルドするとどうなりますか。
- use client が付いています。ブラウザで開くと何が起きますか。
- window is not defined を避けるために typeof で分岐しました。これで直りますか。
- Hydration failed の原因になりうるものを、すべて選んでください。
- 渡している props はプレーンな配列です。中の1つの値だけがクラスのインスタンスです。ビルドは通りますか。
- Symbol を Client Component に渡します。この書き方はビルドが通りますか。
- このファイルを別のコンポーネントから import してビルドすると、どうなりますか。
- このモジュールを Client Component から import すると何が起きますか。
- このモジュールを Server Component から import すると、どのタイミングで問題が表面化しますか。
- use client を import のあとに書きました。ビルドするとどうなりますか。
コードレビュー15問
- ページの先頭に use client を書きました。ここで使っている priceLabel のコードはブラウザに送られますか。
- 同じ画面を、押せるボタンだけ Client Component にして書き直しました。priceLabel のコードはブラウザに送られますか。
- NEXT_PUBLIC_ が付いた環境変数を Client Component で読みました。値はどこに入りますか。
- 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 のコードはブラウザに送られますか。