Next.JS v10+ Translation: i18n the easy way

If you are working in any project with nextJS (a React JS Framework) you may found next-i18-next as a dependency recommended for handling internationalization in nextJS. For the moment, this library doesn't support nextJS v10 +, which provides a new routing algorithm embbeded, althought it's possible to configure the library, its essence, made translation easy in Next, has disappeared.

So, I'm going to tell you how to set up translation in Next v10+ for production grade projects. (at least the easiest way by the date written this post, december 2020)

Libraries to use

• next-translate

That's all! The routing part will be handled by Next, so with this approach we will be only focusing in what matters, translations.

Preparing our project

Changing pages root directory

The first thing to do is renaming the pages directory to something similar, like pages or pages_

This is required because pages final directory contents will be generated automatically by next-translate library.

Setting up localizations structure

You have to create locales directory in the root of your project, then create inside all directories needed for your translations, and then place as many JSON files you need for splitting up your translations:

It's common to have different JSON files, localizing translations by the parts of the application, making translations easier to manage.

Configuring i18n.json base file

Create a new i18n.json file in the root of your project and configure it according your needs:

{
  "locales": ["en", "es"],
  "defaultLocale": "es",
  "currentPagesDir": "pages_",
  "finalPagesDir": "pages",
  "localesPath": "locales",
  "pages": {
    "*": ["common"],
    "/clients": ["clients"],
    "/dashboard": ["clients"]
  }
}

In this file, you will be defining the temporal pages directory, the files you're going to handle and also, the namespaces used by the different routes.

Setting up nextJS locale redirection

We're going to modify the next.config.js file:

const { locales, defaultLocale } = require('./i18n.json')

module.exports = {
  ...
  i18n: {
    locales,
    defaultLocale
  },
}

This option, will tell next which languages will be available and also set up routing  for handling translations with this pattern: base_url/locale/url_path

Modifying package.json for launching next-translate

Modify the scripts section for adding the launch of the library before calling next command:

 "scripts": {
    "dev": "next-translate && next dev",
    "build": "next-translate && next build",
    "start": "next start"
  },

You're good to go!