next-translate

Last modified: April 05, 2022Author:Β Jakub PomykaΕ‚a

next-translate and SimpleLocalize example

Documentation article has been written based on content of GitHub Repository. https://github.com/simplelocalize/simplelocalize-next-translate

Translations location

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

next-translate configuration

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"]
  }
}

NextJS + i18n configuration

Import next-translate configuration file into next.config.js

// πŸ“¦ file: ./next.config.js
const nextTranslate = require('next-translate')

module.exports = nextTranslate({
  webpack: (config, { isServer, webpack }) => {
    return config;
  }
})

SimpleLocalize configuration

πŸ’Ώ 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

‡️ Download translations to ./locales directory

simplelocalize download

‴️ Upload translations from ./locales directory

simplelocalize upload

Usage

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

Try out this demo

First, download source code from GitHub:

https://github.com/simplelocalize/simplelocalize-next-translate

and 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.