CODEWITHSUNDEEP
reactjsnext.jsinternationalizationreact-i18nextnext.js13
ZackChim
ZackChim

Reputation: 153

Next.js 13 Dynamic Route: A required parameter (slug) was not provided as a string in generateStaticParams for /[lng]/blog/[slug]

I'm working on a Next.js 13 project that requires internationalization support and a blog . Here is the structure of the app folder:

app
--[lang]
----blog
------page.tsx
------[slug]
--------page.tsx

The [lang] part is for links of different languages: http://localhost/en/about http://localhost/fr/about

The blog part is for the post list: http://localhost/en/blog (shows a list of all blog)

The [slug] part is for the post detail: http://localhost/en/blog/my-first-post

Before I add the [lang] part, everything works fine, but now, I got an error: Error: A required parameter (slug) was not provided as a string in generateStaticParams for /[lng]/blog/[slug]

But in my page.tsx under [slug], there's no generateStaticParams:

type PageProps = {
  params: {
    slug: string
  }
}

export default function Post({ params: { slug } }: PageProps) {
...

Is the folder structure correct?

I believe this is caused by the two dynamic routes [lang]/blog/[slug], but don't know how to fix it. I tried to do it the old way (before Next.js 13):

app
--[lang]
----blog
------page.tsx
------[slug].tsx

But no luck, any idea?

(or should I get the params with useRouter and pass them the component with generateStaticParams?)

Upvotes: 4

Views: 12298

Answers (1)

ZackChim
ZackChim

Reputation: 153

I figured it out with the help of the official document of next.js. In case anyone needs an answer, here is the link:

https://nextjs.org/docs/app/api-reference/functions/generate-static-params#examples

Upvotes: 3

Related Questions