1

I'm trying to internationalize my website through the subpath feature of next.js.

Here is my module.export :

/* eslint-disable prettier/prettier */
module.exports = {
  i18n: {
    defaultLocale: 'fr',
    locales: ['en', 'fr'],
  },
  react: {
    useSuspense: false,
    wait: true,
  },
}

Here is the structure of my Page folder:

.
│   404.js
│   about.js
│   blog.js
│   index.js
│   projects.js
│   tags.js
│   tree.txt
│   _app.js
│   _document.js
│   
└───blog
│   │   [...slug].js
│   │   
│   └───page
│           [page].js
│           
└───tags
        [tag].js

Everything works with subpath when I'm in the root page directories. localhost:3000/about, localhost:3000/en/about works. localhost:3000/fr/about redirect as localhost:3000/about as intended.

But when I try to access a statically generated page in a folder, in the en subpath (like localhost:3000/en/blog/article1 for example, I get a 404.

How can I make sure the site statically generates pages also for the en subpath ?

Gautier A.
  • 33
  • 4
  • Can you show us what does your `/blog/[...slug].js` file look like? Specifically the `getStaticPaths`/`getStaticProps` functions. – juliomalves Jul 03 '21 at 23:03
  • 1
    Thank you ! It was indeed that. For everyone going by that post, you need to generate a page for each local. It means getting the `locales` prop, which is the list of the different local, and adding them to the return of the `getStaticPaths({locales})`. – Gautier A. Jul 06 '21 at 08:40

1 Answers1

2

In the end, it was because next, in SSR, generated a page only for the root /, and not for the different locals ( /fr/ for example).

I had to change the getStaticPaths() as follow to correct it:

export async function getStaticPaths({ locales }: { locales: any }) {
  const tags = await getAllTags('blog')

  const path = (locale) =>
    Object.keys(tags).map((tag) => ({
      params: {
        tag,
      },
      locale,
    }))
  const paths = locales.map((locale) => path(locale)).flat()

  return {
    paths: paths,
    fallback: false,
  }
}
Gautier A.
  • 33
  • 4