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

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X