Fixing the error required parameter (slug) was not provided as a string in generateStaticParams in NextJs

DanielDecember 21, 2022

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 }));
}