Last updated: 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


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

# Windows (PowerShell)
. { iwr -useb } | iex;



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.

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

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



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

and use download command to download translations from translation editor.

$ simplelocalize download

Downloading translations with namespaces for next-translate

Translation editor

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

Manage your translation strings in Translation Editor

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

How to start auto-translation for many languages at once

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