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.