Next.js i18n dynamic routes with getStaticPaths

Question

I have a /pages/[news]/index.js defined with this getStaticPaths function:

export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      { params: { news: 'news' }, locale: 'en' },
      { params: { news: 'novitta' }, locale: 'it' },
      { params: { news: 'noticas' }, locale: 'es' },
    ],
    fallback: false,
  }
}

This gives me desired routing all going to /pages/[news]/index.js file:

/news -> English news page
/it/novitta -> Italian news page
/es/noticas -> Spanish

Now I would like to add about page /pages/[about.js]

export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      { params: { about: 'about-us' }, locale: 'en' },
      { params: { about: 'chi-siamo' }, locale: 'it' },
      { params: { about: 'sobre-nosotros' }, locale: 'es' },
    ],
    fallback: false,
  }
}

to get these URLs:

/about-us -> English news page
/it/chi-siamo -> Italian news page
/es/sobre-nosotros -> Spanish

But I get this error message: Failed to reload dynamic routes: Error: You cannot use different slug names for the same dynamic path ('page' !== 'blog').

I do understand what the problem is but how can I solve this sort of routing?

Do you want your about page to be dynamic? Seems like you want something like `/pages/[locale]/about.js` and not `/pages/[about.js]` — JohnAllen, Oct 13 '21 at 08:25

Next.js i18n dynamic routes with getStaticPaths

0 Answers0