Translating your Next.js application

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

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

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

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

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

export default Home

We will also have an

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

Translations

First, we need to create

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

module.exports = nextTranslate()

After that, we need to add the

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

Routing to different locales

From version

Link component

In NextJS

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
2
3
<Link href="/about" locale="en">
  <a>About</a>
</Link>

This also means that