This is a Next.js project bootstrapped with create-next-app
.
Translations are placed in /locales/{lang}/{ns}.json
{ns}
- namespace, allows you to split translation keys into multiple files{lang}
- language
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
Install next-translate for NextJS
npm install --save next-translate
Create a configuration file in project root.
π¦ file: ./i18n.json
{
"locales": ["en", "es", "fr", "pl"],
"defaultLocale": "en",
"pages": {
"*": ["common"],
"/": ["home"]
}
}
Import i18next configuration file into next.config.js
// π¦ file: ./next.config.js
const nextTranslate = require('next-translate')
module.exports = nextTranslate({
webpack: (config, { isServer, webpack }) => {
return config;
}
})
πΏ Install SimpleLocalize CLI
curl -s https://get.simplelocalize.io/2.0/install | bash
π§· Create configuration file
# π¦ file: ./simplelocalize.yml
apiKey: YOUR_PROJECT_API_KEY
downloadFormat: single-language-json
downloadPath: ./locales/{lang}/{ns}.json
uploadFormat: single-language-json
uploadPath: ./locales/{lang}/{ns}.json
./locales
directory
simplelocalize download
./locales
directory
simplelocalize upload
Example usage can be found in pages/index.tsx
.
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
First, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.