動的ルートは、どう作りますか。
フォルダ名を角括弧で囲みます。app/blog/[slug]/page.tsx のようにすれば、その配下のURLをこのページが処理します。値は params から await して受け取ります。
面接官が見ているのは基本の補強。
これは「動的ルートで params.slug を読もうとしたら、期待した値が入っていませんでした。何を疑いますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- フォルダ名を角括弧で囲み、params から受け取る（現在は await が必要）
事前生成したい場合は generateStaticParams で対象を列挙します。 - ファイル名を角括弧で囲む
App Router ではフォルダ名です。ファイル名で表現するのは Pages Router の流儀で、ここが混ざると調べ物が噛み合わなくなります。 - next.config でルーティングを定義する
ファイル構造で表現します。設定ファイルには書きません。 - 角括弧のフォルダを作り、generateStaticParams で全パターンを必ず列挙する
全部を列挙する必要はありません。指定しなかったものは最初のアクセス時に生成されます。
面接官は何を見ているか
- 角括弧のフォルダ名を挙げた
- params から受け取ると言えた
- 事前生成の存在に触れられればなお良い
模範解答
フォルダ名を角括弧で囲みます。app/blog/[slug]/page.tsx のようにすると、/blog/なんとか がこのページで処理されます。
値は params から受け取ります。現在は Promise なので await が要ります。
よく使うページをビルド時に作っておきたい場合は、generateStaticParams で対象の値の一覧を返します。全部を事前生成する必要はなく、指定しなかったものは最初のアクセス時に生成されます。