Next.js has become one of the most popular React frameworks and is currently used by companies of all sizes. Given that many companies are internationalizing their projects and therefore seeking applications that can work in multiple languages, next-translate is a natural fit -- and it's also very easy to use!

Getting Started with Next

First, we need to create a project. I will use Yarn Package for this project example, but you can also use NPM if you prefer.

Next, open your terminal and run the command: mkdir nexttranslate

We just created a new folder named nexttranslate (you can name it according to your preference), and now we will navigate into that folder and create our project.

Run: cd nexttranslate and then yarn create next-app web --typescript

Now we've created our next project, so let's open it.

Run: cd web and then code .

Organizing Your Folders

Now we need to organize the folder structure. You can do this however you see fit. I like to start by deleting the files that I will not be using, like the styles folder (we will not be using styles for this project). In the pages folder, you can delete the api folder, and finally, in the index.tsx, you can delete everything and leave it as shown below: 

Installing Next-Translate and Creating the i18n.js File

Now we need to install the next-translation library. To do this, simply open the terminal in the project repository again and run: yarn add next-translate

Next.js projects have a next.config.js file in the root repository. We need to modify this to initialize the translations in your project:

As described in the official documentation, we need to create the  i18n.js file in the root repository where we will configure the library. So, after creating the i18n file, we need to add it to our file:

There's only one more step before we can start using our translation tool in our code: we need to create a translation folder in our root directory. In it, we should have a folder for each type of locale defined in the i18n file. In our example, we will create these: locales/en and locale/pt-bt, just like this:

As you may recall, we added a namespace called default in the i18n file. We will use this by adding a json file called default.json in a local folder, like this:

Creating Keywords

Now let`s start creating our keywords! Keywords are used in our html file to show something on the screen, like our “Hello World!”. So our first keyword will be helloWord, as shown below:

Remember to replace the keyword in the appropriate locations and apply the correct translation for each of them.

Now, let’s return to the index.tsx file in the pages folder, add some things, and apply quick styles:

Importing a Hook for Translation

At this point, we need to import a hook from the next-translate library where we can use our key and do the translation. Simply import it into your index.tsx :

import useTranslation from 'next-translate/useTranslation';

You can extract a t function from the hook that takes a translation key (string) as a parameter. This key corresponds to the name of your translation.

const { t } = useTranslation('default');

So we have:

Then we will change the text “”Hello World”” to the key we named helloWorld in the default.json:

To finish, we just need to add some props to the link:

href="/" locale="pt-br" for Portuguese;

href="/" locale="en"for English;

Like this:

And that's it -- we’ve done it! Now, we just need to test it.

Testing

Just open your terminal in your current project and run yarn dev

Wait for the process to complete, and then you can access the link: http://localhost:3000/en

Let’s take a look at the result:

I hope this quick tutorial of next-translate helps you whenever you need to use multiple languages within your application!