Translate your next js project with next-translate
Tags: nextjs, react, webdev
Published: 2021-07-28 18:31:08

<!-- wp:paragraph -->
<p>Do you have a <strong>next js</strong> application and do you need multiple languages? Let's start to explain how to translate your <strong>next js</strong> project with <strong>next-translate</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first step is to decide which approach is the best for your <strong>next js</strong> project. There are two main tasks you need to handle:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>manage JSON locales</li><li>maintain separate URLs</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Starting with version 10.0.0 Next js has built-in support for internationalized routing and he comes with two proposals:<br>Sub-path Routing and Domain Routing. If you like to read more about these two technics check the official <a href="https://nextjs.org/docs/advanced-features/i18n-routing" target="_blank" rel="noreferrer noopener nofollow">link</a>. In our tutorial, we will use sub-path routing, so let's start!</p>
<!-- /wp:paragraph -->

## 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.

<!-- wp:paragraph -->
<p>I added few things in the <strong>i18n </strong>file, <strong>locales </strong>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 <strong>defaultLocale </strong>to "ro" to be the default language for my project, you can set it to be your native language.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The last thing from the <strong>i18n </strong>file is <strong>pages</strong>, 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.</p>
<!-- /wp:paragraph -->

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 )

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I used <strong>react-bootstrap</strong> to create the dropdown, you can use any other UI framework or you can build your own dropdown.</p>
<!-- /wp:paragraph -->

```
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](https://stefaniq.com/translate-your-next-js-project-with-next-translate/).