I am trying to achive the most basic functionality of dynamic routing in Next.js using generateStaticParams().
Here is my file strucure:
here is the code from ./app/[route]/page.tsx:
export default function Page({ params }: { params: {route: string} }){
const route = params.route ;
return (
<div>
<h1>{`Staticlly Generated Route ${route}`}</h1>
</div>
);
}
export function generateStaticParams() {
return [{route: 'one'}, {route: 'two'}, {route: 'three'}];
}
This issue is, regardless what url is entered it resolves with the route as the route parameter to Page component:
The goal is to have it to return a 404 if the route is anything not returned by generateStaticParams, in this case, /one, /two, or /three
The answer is documented on the Route Segment Config page in Next.js docs
by default "Dynamic segments not included in generateStaticParams are generated on demand."
so "by directly exporting the following variables:" which is in our case is dynamicParams, we can make "Dynamic segments not included in generateStaticParams return a 404"
i added:
export const dynamicParams = false
in myapp/[route]/page.tsx
It also worked as an export in app/layout.tsx.