next-i18next

In this article, you will learn how to configure and use i18next for NextJS and how to manage translations via translation editor. The article is based on a demo application available on GitHub.

Table of contents

• Translation files

• Installation

  • Install next-i18next
  • Install SimpleLocalize CLI

• Configuration

  • next-i18next
  • SimpleLocalize CLI

• Usage

  • next-i18next
  • SimpleLocalize CLI

• Translate NextJS application

Translation files

In this example, we will keep translations in the /public/locales/{lang}/{ns}.json directory, where lang is a language key (e.g.: en, es, fr_FR, pl) and ns is a namespace (e.g.: common and home).

Namespaces are used to group translations. For example, you can have a common namespace for translations that are used across the application and a home namespace for translations that are used only on the home page.

.
├── en
│   ├── common.json
│   └── home.json
├── es
│   ├── common.json
│   └── home.json
├── pl
│   ├── common.json
│   └── home.json
└── fr_FR
    ├── common.json
    └── home.json

Installation

Install next-i18next

Install a i18next library for NextJS

# NPM
npm install --save next-i18next

# Yarn
yarn add next-i18next

Install SimpleLocalize CLI

SimpleLocalize CLI is a command line tool that allows you to quickly upload and download translations from the translation editor.

# macOs / Linux / Windows (WSL)
curl -s https://get.simplelocalize.io/2.2/install | bash

# Windows (PowerShell)
. { iwr -useb https://get.simplelocalize.io/2.2/install-windows } | iex;

Configuration

next-i18next

Create next-i18next.config.js file in project root.

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'pl', 'fr_FR'],
  },
};

Import the newly created file in next.config.js

const {i18n} = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  i18n
}

module.exports = nextConfig

SimpleLocalize CLI

Create simplelocalize.yml file in your project root directory. Please note that the uploadPath and downloadPath must match the path of your translation files.

apiKey: YOUR_PROJECT_API_KEY
downloadFormat: single-language-json
downloadPath: ./public/locales/{lang}/{ns}.json

uploadFormat: single-language-json
uploadPath: ./public/locales/{lang}/{ns}.json
uploadOptions:
  - REPLACE_TRANSLATION_IF_FOUND # used to override translation from JSON files on upload

Remember to replace YOUR_PROJECT_API_KEY with your project API key. You can find it in Your Project > Integrations > Project Credentials > API Key.

Usage

next-i18next

Example usage can be found in pages/index.tsx.

//translations from common.json
const {t} = useTranslation('common');
console.log(t('LEARN_MORE')) // output: Learn more

//translations from home.json
const {t: homeT} = useTranslation('home');
console.log(homeT('HELLO_WORLD')) // output: Hello world

SimpleLocalize CLI

Now you can run upload command to upload translations to translation editor.

$ simplelocalize upload

and use download command to download translations from translation editor.

$ simplelocalize download

You can also use i18next missingKeyHandler method to create missing keys automatically.

Translate NextJS application

Now you can translate your NextJS application using the translation editor.

If you want to translate your app in multiple languages fast, you can add new languages in the Languages tab, and use auto-translation features to speed up the process.

After you finish translating your app, you can run simplelocalize download command to download translations to your local files.