next-translate

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

• Installation

• Configuration

  • next-translate
  • SimpleLocalize CLI

• Usage

  • next-translate
  • SimpleLocalize CLI

• Working with translation editor

• Resources

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

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.5/install | bash

# Windows (PowerShell)
. { iwr -useb https://get.simplelocalize.io/2.5/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

and use download command to download translations from translation editor.

$ simplelocalize download

Working with translation editor

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

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

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

Resources

• Blog: Next-translate integration
• Blog: Number formatting in JavaScript