next-i18next

next-i18next and SimpleLocalize example

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

Translations location

Put your translations in /public/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_FR, pl.

.
├── en
│   ├── common.json
│   └── home.json
├── es
│   ├── common.json
│   └── home.json
├── pl
│   ├── common.json
│   └── home.json
└── fr_FR
    ├── common.json
    └── home.json

i18next configuration

Install i18next for NextJS

npm install --save next-i18next

Create a configuration file in project root.

// 📦 file: ./next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'pl', 'fr_FR'],
  },
};

NextJS i18n configuration

Import i18next configuration file into next.config.js

// 📦 file: ./next.config.js
const {i18n} = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  i18n
}

module.exports = nextConfig

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: ./public/locales/{lang}/{ns}.json

uploadFormat: single-language-json
uploadPath: ./public/locales/{lang}/{ns}.json

⤵️ Download translations to ./public/locales directory

simplelocalize download

⤴️ Upload translations from ./public/locales directory

simplelocalize upload

You can automate process of adding translation keys from project to SimpleLocalize.

Usage

Example usage can be found in pages/index.tsx.

//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-i18next

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.

Table of content