動的ルートで params.slug を読もうとしたら、期待した値が入っていませんでした。何を疑いますか。
params が Promise になっていることを疑います。現在の App Router では params と searchParams が Promise で、await してから分解する必要があります。
面接官が見ているのは🔴 Next.js 15 の破壊的変更。古いコードを写すと必ず踏む。
よくある答えと、面談でどう見られるか
- params が Promise になっているので await が要る
Next.js 15 での変更です。古いサンプルや生成AIの出力には旧形式が多く残っています。 - フォルダ名の角括弧の書き方を間違えている
その可能性もありますが、その場合はルート自体が一致せず 404 になります。「値が入っていない」なら Promise の方を先に疑います。 - Client Component では params を受け取れない
page の props として渡るのはサーバー側です。ただし設問の症状は Promise を await していないケースが圧倒的に多いです。 - generateStaticParams を書いていないから
書かなくても動的に生成されます。値が入らない理由にはなりません。
面接官は何を見ているか
- params が Promise になったことを疑えた
- await が必要だと言えた
- バージョンによる違いだと理解している
模範解答
params が Promise になっていることを疑います。
現在の App Router では、params と searchParams は Promise です。型としても params: Promise<{ slug: string }> と書き、使うときは const { slug } = await params のように await します。
これは Next.js 15 で入った変更で、それ以前は同期的なオブジェクトでした。ネット上のサンプルや、生成AIが出すコードにはparams.slug を直接読む古い形が今も多く残っています。写して動かないときは、まずここを疑うと早いです。
なお、これに伴い page や layout を async にする必要が出てきます。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。