How to fix "A required parameter was not provided as a string in getStaticPaths" in Next.js

I encountered the following error while using NextJS:

Server Error
Error: A required parameter (slug) was not provided as a string in getStaticPaths for /[slug]

Screenshot of Next JS error: Error: A required parameter (slug) was not provided as a string in getStaticPaths for /[slug]

What this error means

As the screenshot shows, the error means that there is a required parameter that you are not providing in the getStaticPaths function.

How to fix it.

Depending on what your dynamic route is. Then you need to return the params with that name.

So let’s say my dynamic route is [slug].js, and the following function is giving me the error:

export const getStaticPaths = async ()=> {

  const files = fs.readdirSync('posts');

  const paths = files.map(filename=>({
    params:{
      path:filename.replace('.md', '')
    }
  })
  )

  return {
    paths,
    fallback:false
  }
}

The issue is I am not returning slug in the params. To fix this issue, replace “path” with “slug” (or change the file from [slug].js to [path].js).

So the following function would fix the issue:

export const getStaticPaths = async ()=> {

  const files = fs.readdirSync('posts');

  const paths = files.map(filename=>({
    params:{
      slug:filename.replace('.md', '')
    }
  })
  )

  return {
    paths,
    fallback:false
  }
}

That’s it.

Looking to learn how to code and make money online? Check out CodingPhase (referral link)