動的ルートで params.slug を直接読んだら、値が入っていませんでした。なぜですか。
params が Promise になっているからです。型も Promise で書き、await してから分解します。Next.js 15 で入った変更なので、古い記事のコードをそのまま写すと必ず踏みます。
面接官が見ているのは🔴 Next.js 15 の破壊的変更。古いサンプルを写すと必ず踏む。
よくある答えと、面談でどう見られるか
- params が Promise になったため。await してから読む
Next.js 15 での変更です。古い記事や生成AIの出力には旧形式が多く残っています。 - フォルダ名の角括弧の書き方を間違えている
その場合はルート自体が一致せず 404 になります。値が空なら Promise を疑います。 - generateStaticParams を書いていないから
書かなくても動的に生成されます。値が入らない理由にはなりません。 - Server Component では params を受け取れないから
受け取れます。page の props として渡ります。
模範解答
params が Promise になっているからです。型としても params: Promise<{ slug: string }> と書き、const { slug } = await params のように await します。
これは Next.js 15 で入った変更で、それ以前は同期的なオブジェクトでした。ネット上のサンプルや生成AIの出力には、params.slug を直接読む古い形が今も多く残っています。写して動かないときは、まずここを疑うと早いです。
同じ方向の変更として searchParams、cookies()、headers() も非同期になりました。個別に暗記するより「リクエスト依存の情報は、必要になるまで待たない形に揃えられた」と理解しておく方が、次の変更にもついていけます。