Search code examples
typescriptnext.jsnext.js15generatestaticparams

How to use 'generateStaticParams' for nested route in Next.js 15

I have the following folder structure in my Next.js 15 app:

• app
    ◦ layout.tsx
    ◦ page.tsx
    ◦ [lang]
        ▪ [...slug]
            • page.tsx

How and where should I use 'generateStaticParams' to get prerendered content for the following URLs:

  • /en/blog/post-1
  • /de/blog/post-1
  • /en/contact
  • /de
Solution

  • According to the docs, using multiple dynamic segments + catch-all dynamic segments, this should be the output:

    // /[lang]/[[...slug]]/page.tsx
export function generateStaticParams() {
  return [
    { lang: 'en', slug: ['blog', 'post-1'] },
    { lang: 'de', slug: ['blog', 'post-1'] },
    { lang: 'en', slug: ['contact'] },
    { lang: 'de', slug: undefined } /* Because catch-all route is optional you can do this*/

  ]
}

    However make sure that [...slug] becomes [[...slug]] (optional catch-all segment) You can read more about it here