What this error means and how to fix it.
The other day, while working on the example of how to use the generateStaticParams() function in the NextJs app folder I've encountered the below error:
Server Error
Error: A required parameter (slug) was not provided as a string in generateStaticParams
This error happens because the dynamic route segment name does not match the name of the parameter you return from the generateStaticParams()
function.
Let's say we have the following app structure:
/app
/pokemon
/[slug]
page.js
And in the /app/pokemon/[slug]/page.js
file you have a generateStaticParams()
function that returns something like this:
//app/pokemon/[slug]/page.js
export async function generateStaticParams() {
// rest of the code here
return pokes.results.map((p) => ({ name: p.name }));
}
The error appears because there is a mismatch between the naming of the dynamic segment ([slug]
) and the naming of what we return from the function (name
).
In order to fix this error we will need to update the name of the dynamic segment from [slug]
to [name]
.
After this the working folder structure will look as below:
/app
/pokemon
/[name]
page.js
The content of the page.js
will remain as it is. The full code of this example is here.
Also, another valid solution would have been to change what we return from the generateStaticParams()
function:
//app/pokemon/[slug]/page.js
export async function generateStaticParams() {
const pokes = await getPokemons();
return pokes.results.map((p) => ({ slug: p.name }));
}
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.