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
and use download
command to download translations from translation editor.
$ simplelocalize download
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.