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
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!