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
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
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
Working with 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.