Undefined issue with generateStaticParams with multiple dynamic segments in a route
Answered
Greek Shepherd posted this in #help-forum
Greek ShepherdOP
Hi, im using generateStaticParams in the following routes:
this is in the parent page:
and in the child page:
but
AVAILABLE_GAMES is defined:
/plans/[game]
and /plans/[game]/[planId]
this is in the parent page:
// TODO: pull from external source
export async function generateStaticParams() {
console.log("Available games: ", AVAILABLE_GAMES)
return AVAILABLE_GAMES.map((game) => ({ game }))
}
and in the child page:
export async function generateStaticParams({
params,
}: {
params: { game: AvailableGamesType }
}) {
console.log("child generateStaticParams params:", params)
const plans = await getPlansForGame(params.game)
return plans.map((plan) => ({
planId: plan.planId,
}))
}
but
params
in the child is an empty object:frontend:dev: child generateStaticParams params: {}
AVAILABLE_GAMES is defined:
frontend:dev: Available games: [ 'minecraft', 'rust' ]
Answered by Greek Shepherd
seems like this only works when using generateStaticParams in a layout, but this isnt explicitly mentioned in the docs. only by the filename in the code example:
https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-top-down
https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-top-down
1 Reply
Greek ShepherdOP
seems like this only works when using generateStaticParams in a layout, but this isnt explicitly mentioned in the docs. only by the filename in the code example:
https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-top-down
https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-top-down
Answer