Next.js url structure for multi language sites

Question

I'm migrating my app to Next.js. Currently I have a url structure like this:

www.example.com/ <-- English
www.example.com/de <-- German
www.example.com/page <-- English
www.example.com/de/page <-- German

So my english website does not have the language in the url. If someone tries to access the website with "en" in the url he will be forwarded.

How would I achieve this in Next.js? Having always two files (i.e. "[language].js" and "index.js") in the /pages directory seems to be not the right solution.

Answer 1

With NextJS 10 you can do this natively. Your next.config.js would look like this:

module.exports = {
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
  },
}

The defaultLocale is the language for www.example.com/.

Then you can use a library like next-i18next to store the translations.

Answer 2

UPDATE: As nunorbatista said: With NextJS 10 you can do this natively. Your next.config.js would look like this:

module.exports = {
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
  },
}

Old answer:

The folder structure is correct, but you don’t need to write duplicate code inside [language] folder. Just import the page from ”main” folder. Multilingual is currenly a bit complex to setup with Next.js. Here is the situation at the moment.

If you want to use library

• with serverless deployment you should watch this one.
  • https://github.com/vinissimus/next-translate
• without serverless deployment you should watch this one.
  • https://github.com/isaachinman/next-i18next

If you want to do it on your own, you should modify them to match your needs.

• Next.js version 9.3 or above
  • https://codesandbox.io/s/92ebn
• Next.js version below 9.3
  • https://github.com/fwojciec/simple-i18n-example