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

huangapple go评论74阅读模式
英文:

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 blogs)

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?)

英文:

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?)

答案1

得分: 2

我通过Next.js的官方文档找到了答案。如果有人需要答案,这是链接:

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

英文:

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

huangapple
  • 本文由 发表于 2023年5月11日 14:33:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76224747.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定