next-translate

Last modified: November 23, 2022Author: Jakub Pomykała

In this article, we will show you how to integrate SimpleLocalize with NextJS using next-translate and how to manage translations via translation editor. The article is based on a demo application available on GitHub.

Table of contents

Translation files

In this example, translations are placed in /locales/{lang}/{ns}.json directory, where:

  • {ns} - is a namespace,
  • {lang} - is a language key

In this example there are two namespaces: common and home and 4 locales: en, es, fr, pl.

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

Sample common namespace with translations in JSON

Installation

Install next-translate for NextJS

# with npm
npm install --save next-translate

# with yarn
yarn add next-translate

Install SimpleLocalize CLI to manage translations from web translation editor

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

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

Configuration

next-translate

Create a i18n.json file in project root.

{
  "locales": ["en", "es", "fr", "pl"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/": ["home"]
  }
}

Import next-translate configuration file in next.config.js like below:

const nextTranslate = require('next-translate')

module.exports = nextTranslate({
  webpack: (config, { isServer, webpack }) => {
    return config;
  }
})

SimpleLocalize CLI

Create simplelocalize.yml file with CLI configuration in your project root directory.

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

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

Usage

next-translate

Import useTranslation hook from next-translate package and use t function to get translated text.

import useTranslation from 'next-translate/useTranslation'

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

Uploading translations with namespaces for next-i18next

and use download command to download translations from translation editor.

$ simplelocalize download

Downloading translations with namespaces for next-i18next

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

Working with translation editor

Now, you can translate uploaded translation files in translation editor.

translate project

You can also speed up the translation process by using auto-translation from the Languages tab.

auto-translate project

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

Resources