1

I am currently working with a headless WordPress site in Next.js. I struggle a bit with the routing for internationalization. I have 2 main page files relevant for this question:

pages/[...slug].tsx

In this file I use a getStaticPaths function to fetch GraphQL data for all pages in my WordPress database.

pages/[locale]/Blog/[...slug].tsx

In this file I use a getStaticPaths function to fetch GraphQL data for all blog posts in my WordPress database.

I have locales configured in my next.config file like this:

i18n: {
    locales: ['da-DK', 'en-GB'],
    defaultLocale: 'da-DK',
  },

I struggle to find a way to catch all the blog posts. With my current file structure, I will catch all blog posts with an url like:

siteName/en/blog/page-name

BUT not blog posts under default language with the structure:

siteName/blog/page-name

I tried with [[locale]] but got the error:

Error: Optional route parameters are not yet supported ("[[locale]]").

so only catch-all routes can be made optional it seems. Any idea how to handle something like this? Another way could be to 'join' the 2 different files for posts and blog posts and then use some conditional logic to sort if I need a Query for a post or a page. I would rather avoid this if possible...

Lars Ejaas
  • 153
  • 9
  • 1
    Can you show the code you have in `getStaticPaths`/`getStaticProps` for the `pages/[locale]/Blog/[...slug]` path? You don't need to handle the `[locale]` routing yourself, Next.js i18n routing will do that for you. – juliomalves Jul 03 '21 at 18:37

1 Answers1

0

I ended up with some conditional logic to determine if I should get blogposts or page data from my CMS. I am keeping my fingers crossed that Optional route parameters will be implemented in Next.js later on - that would surely be a more flexible solution.

Lars Ejaas
  • 153
  • 9