/Development

Translating your Next.js application

by Mileta

Next.js provides server-side rendering for React applications. In this post, we will learn how to translate the text in a Next.js app by using

1 next-translate
.

Before we proceed ensure you have the following installed on your system:

  • node
  • npm
  • yarn

Project setup

First, we need to create a project. We will do this by using the

1 create-next-app
that is provided by the NextJS team.

In terminal type :

1 npx create-next-app

This will run an interactive prompt that will ask for the project name. You can name it whatever you like. For the sake of this post, we named ours

1 next-translate
. It will also install all the required dependencies for the project to work. After that go inside the newly created project and run
1 yarn dev
command. After that visit
1 localhost:3000
and you will see the starter page template that looks like this.

img.png

We don't need these components and pages from the starter template so now you'll need to delete the

1 styles/Home.module.css
file, and
1 api
directory that can be found inside of
1 pages
. Open up
1 pages/index.js
, delete everything from there, and paste this

1 2 3 4 5 6 7 const Home = () => { return ( <h1>Home</h1> ) } export default Home

We will also have an

1 about
page so let's create one now.

1 2 3 4 5 6 7 const About = () => { return ( <h1>About</h1> ) } export default About

After getting this done we need to install a library for translating our pages. Open up a terminal in your project directory and type

1 yarn add next-translate
IF everything is installed and working correctly we can move on to translating our app.

Translations

First, we need to create

1 next.config.js
in the project root, and after doing that paste the code below. It is required for the plugin to be properly loaded.

1 2 3 const nextTranslate = require('next-translate') module.exports = nextTranslate()

After that, we need to add the

1 i18n.json
configuration file in the project root. We need this so that
1 next-translate
knows what locales are we going to have and which translation file is assigned to which page.

1 2 3 4 5 6 7 8 { "locales": ["en", "me"], "defaultLocale": "en", "pages": { "/": ["home"], "/about": ["about"] } }
  • In the
    1 locales
    array we specify all the locales that we want to use in our project (uses ISO format)
  • 1 defaultLocale
    is required so that
    1 next-translate
    knows what is our default language (uses ISO format)
  • In
    1 pages
    we specify namespaces used in each page. To add namespaces to all pages use
    1 (eg:
    {"*": ["common"]}
    1 ). You can also use regex to specify what locales are used in pages. \ \ After creating configuration files we now need to specify namespaces. By default, they are specified inside the
    /locales` root directory.
1 2 3 4 5 6 ├── en │ ├── about.json │ └── home.json └── me ├── about.json └── home.json

In these

1 .json
files we will specify translations for all our pages. Note that file names match ones from the
1 i18n.json
configuration that we wrote earlier. The basic content of
1 en/home.json
looks like this

1 2 3 4 5 { "title": "Home Page", "description": "This is a home page description written in the English language.", "current-language": "Current locale is set to /{{language}}" }

You probably noticed

1 {{language}}
syntax. This allows us to use variables in our translations if we have dynamic content. Using translation in the app is pretty simple and straightforward. First we import
1 useTranslation
hook from
1 next-translate/useTranslation
. Using that hook we then import namespace and function that will allow us to use translations from
1 .json
files that we specified in
1 /locales
directory. This is what our updated
1 index.js
looks like.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import useTranslation from "next-translate/useTranslation" const Home = () => { const { t, lang } = useTranslation("home") const title = t("title") const description = t("description") const language = t("language", { language: lang }) return ( <> <h1>{title}</h1> <h4>{description}</h4> <p>{language}</p> </> ) } export default Home

Let's explain line by line what is happening here.

By using the

1 useTranslation
hook we got access to 2 variables,
1 t
, and
1 lang
.
1 t
is used for translating, and in
1 lang
we have access to the currently active locale.

By adding a parameter to the
1 useTranslation
hook we are specifying the default namespace for that page. That parameter is optional since the
1 next-translate
plugin will load only the namespace that the page needs. It does so by reading the
1 i18n.json
configuration that we created in the
1 root
directory.

1 t("title")
will load translation from
1 /locales/(en/me)/home.json
file. We can then assign it to a variable and use it on the page.

By using
1 t("language", { language: lang })
we are loading translation that is assigned to
1 language
, while also passing variable to it. It will return as a translation with a variable added to it.

Routing to different locales

From version

1 10
of NextJS
1 Internationalized Routing
is supported by default, which means that we can load different locales without using external libraries.

Let's say that you have 2 different locales
1 en
and
1 me
. We need to give the user an option to switch to a different locale if he/she wants to. We can achieve this easily by using the
1 Link
component from
1 next/link
.

Link component

In NextJS

1 Link
component is used for client-side routing, and if we want to send the user to another page we can use this code snippet

1 2 3 4 5 import Link from "next/link"; <Link href="/about"> <a>About</a> </Link>

but if we want to send the user to the

1 /about
page with a different locale we can pass the
1 locale
prop to
1 Link
component like this

1 2 3 <Link href="/about" locale="en"> <a>About</a> </Link>

This also means that

1 next-translate
will automatically read that locale and serve translated content without any additional checks.

As we can see, translation in NextJS is convenient, easy to set-up, and use. You can find the code by clicking here. It is a GitHub repository with the code from this article that you can use and modify. The project in this repository contains basic styling and routing.

tags

Development, NextJS