Translate your next js project with next-translate

Do you have a next js application and do you need multiple languages? Let's start to explain how to translate your next js project with next-translate.

The first step is to decide which approach is the best for your next js project. There are two main tasks you need to handle:

1. manage JSON locales
2. maintain separate URLs

Starting with version 10.0.0 Next js has built-in support for internationalized routing and he comes with two proposals:
Sub-path Routing and Domain Routing. If you like to read more about these two technics check the official link. In our tutorial, we will use sub-path routing, so let's start!

Start with configurations

First of all, we need a next-translate package, install it with npm install next-translate, create an i18n JSON file in the root of the project and add your languages, check my example from the image, I will use stackblitz to create this tutorial and I will add the link of the project at the end of the article.

I added few things in the i18n file, locales it's an array with the languages you want to have in your project, in my case "ro" it's for Romanian and "en" it's for English. I set up defaultLocale to "ro" to be the default language for my project, you can set it to be your native language.

As a small observation is to check which language is set on the browser, the project will be translated first time in the browser language.

The last thing from the i18n file is pages, an array that contains the name of files with the translations for each page. I this tutorial I added just one file common to have the same examples.

Create locales folder in the root of the project with languages you set up in the i18n file and also add next-translate package to next.config.js

const nextTranslate = require('next-translate');
module.exports = nextTranslate();

If you already have configurations in your next.config.js file you need to wrap all the configurations into next-translate module:

const nextTranslate = require("next-translate");
module.exports = nextTranslate({
  env: {
    REACT_APP_API: "http://localhost:3000",
  },
  eslint: {
    ignoreDuringBuilds: true,
  }
});

To summarize, add i18n.json file in the root of the project with your configurations and install next-translate package, create locales folder with languages and add common file name as JSON and import next-translate into next-config.js in order to load all configurations.

Translate pages

In our common.json file, we need to add some attributes, for example, if we decide to translate our title we should add it in both places locales/en and locales/ro:

// en
{
  "title": "Welcome to our translated page"
}

// ro
{
  "title": "Bine ati venit"
}

The next step we should do is to get our translated title on the Home page (any other component):

import useTranslation from 'next-translate/useTranslation';

//use into component
const { t, lang } = useTranslation('common');
const title = t('title');

Create language switch component ( bonus )

I've create also a component for switching our language, we set up the name of languages in common.json files, and then we can extract them in the component.

I used react-bootstrap to create the dropdown, you can use any other UI framework or you can build your own dropdown.

import React from 'react';
import { Dropdown, DropdownButton } from 'react-bootstrap';
import i18nConfig from '../../i18n.json';
import useTranslation from 'next-translate/useTranslation';
import Link from 'next/link';

const SwitchLanguage = () => {
  const { locales, defaultLocale } = i18nConfig;
  const { t, lang } = useTranslation('common');

  return (
    <div>
      <DropdownButton id="dropdown-basic-button" title="Switch Lang">
        {locales.map(lng => {
          if (lng === lang) return null;
          return (
            <Dropdown.Item key={lng}>
              <Link href="/" locale={lng} key={lng}>
                {t(`common:language-name-${lng}`)}
              </Link>
            </Dropdown.Item>
          );
        })}
      </DropdownButton>
    </div>
  );
};

export default SwitchLanguage;

You can find the original article and stackblitz demo here.

Comments

[Lars Rye Jeppesen]

Great article.
I can't believe translations are runtime - I am coming from Angular where translation is done build-time, which then has zero performance overhead and doesn't require all these hoops to make sure translations are in place.