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

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

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:

  1. app
  2. --[lang]
  3. ----blog
  4. ------page.tsx
  5. ------[slug]
  6. --------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:

  1. type PageProps = {
  2. params: {
  3. slug: string
  4. }
  5. }
  6. export default function Post({ params: { slug } }: PageProps) {
  7. ...

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

  1. app
  2. --[lang]
  3. ----blog
  4. ------page.tsx
  5. ------[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:

  1. app
  2. --[lang]
  3. ----blog
  4. ------page.tsx
  5. ------[slug]
  6. --------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:

  1. type PageProps = {
  2. params: {
  3. slug: string
  4. }
  5. }
  6. export default function Post({ params: { slug } }: PageProps) {
  7. ...

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

  1. app
  2. --[lang]
  3. ----blog
  4. ------page.tsx
  5. ------[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:

确定