Error: Page "/[[...slug]]/page" is missing param "/users" in "generateStaticParams()"
Answered
Oak apple gall wasp posted this in #help-forum
Oak apple gall waspOP
I am in the process of migrating a Vite client app to Next.js App router, I have followed the guide here: https://nextjs.org/docs/app/building-your-application/upgrading/from-vite
The app uses react-router for client side routing still, which will later be migrated to the Next.js app router incrementally.
I can now successfully run the the dev server and the app works, but whenever I reload on a page other than "/" I get an error saying the page is missing params.
I followed the guide exactly, and used a single catch all route to import my whole client side app, what could I be doing wrong?
The app uses react-router for client side routing still, which will later be migrated to the Next.js app router incrementally.
I can now successfully run the the dev server and the app works, but whenever I reload on a page other than "/" I get an error saying the page is missing params.
I followed the guide exactly, and used a single catch all route to import my whole client side app, what could I be doing wrong?
Answered by joulev
it would take care of it if you allow the page to be dynamically rendered (by removing
generateStaticParams and output: "export") – note that this will disqualify you from hosting your app on any static hosting platforms.5 Replies
@Oak apple gall wasp I am in the process of migrating a Vite client app to Next.js App router, I have followed the guide here: https://nextjs.org/docs/app/building-your-application/upgrading/from-vite
The app uses react-router for client side routing still, which will later be migrated to the Next.js app router incrementally.
I can now successfully run the the dev server and the app works, but whenever I reload on a page other than "/" I get an error saying the page is missing params.
I followed the guide exactly, and used a single catch all route to import my whole client side app, what could I be doing wrong?
you need to add that page to the returned value in
refer to the
weird, i know, but since you are statically exporting the app and make use of a dynamic route, you have to explicitly declare to nextjs what routes you have. when you fully migrate it should become
generateStaticParams as well.refer to the
generateStaticParams documentation: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-paramsreturn [
{ slug: [""] }, // for /
{ slug: ["users"] }, // for /users
{ slug: ["hello", "world"] }, // for /hello/world
]weird, i know, but since you are statically exporting the app and make use of a dynamic route, you have to explicitly declare to nextjs what routes you have. when you fully migrate it should become
app/page.tsx, app/users/page.tsx, app/hello/world/page.tsx which make more sense that this.Oak apple gall waspOP
I was under the impression from the guide that the catch all would take care of this? I have hundreds of pages and just want a quick way to setup Next so I can incrementally switch over to app router
@Oak apple gall wasp I was under the impression from the guide that the catch all would take care of this? I have hundreds of pages and just want a quick way to setup Next so I can incrementally switch over to app router
it would take care of it if you allow the page to be dynamically rendered (by removing
generateStaticParams and output: "export") – note that this will disqualify you from hosting your app on any static hosting platforms.Answer
Oak apple gall waspOP
Oh, well that shouldn't be a problem, I will not be doing static hosting at all, it will be deployed to a Docker image
Oak apple gall waspOP
That seems to have fixed it, thanks 🙏