locize-cli VS i18next

Now let's install the locize-cli:

Just use this cli to synchronize the translations with your code. To see how this could look like check out Step 1 in this tutorial.

install the locize-cli (npm i locize-cli)

You can, for example, run an npm script script (or similar), which will use the cli to download the translations from locize into the appropriate folder next-i18next is looking in to (i.e. ./public/locales). This way the translations are bundled in your app and you will not generate any CDN downloads during runtime.

First you need to signup at locize and login. Then create a new project in locize and add your translations. You can add your translations either by importing the individual json files or via API or by using the CLI.

First in locize, create a dedicated version for production. Do not enable auto publish for that version but publish manually or via API or via CLI. Lastly, enable Cache-Control max-age​ for that production version.

I am so sorry for all the people using https://www.i18next.com/ and manually defining string ids. Fuck that. I will never write another message id in my life.

We use https://www.i18next.com/ with JSON files for each language. Works flawless with TypeScript and Jest.

As a maintainer of i18next, an open-source localization library, I can attest that there is nothing quite like the feeling of joy and pride that comes from contributing to the open-source community. Seeing others use and appreciate your work is a feeling like no other. But with great power comes great responsibility, and maintaining an open-source project can sometimes be a heavy burden at times.

i18next - a full-featured i18n library for JavaScript. It gives you the option to separate translations into multiple files and to load them on demand.

i18next is a very popular internationalization framework for browsers or any other javascript environment.

Translations that are dynamic was a big system I wanted to start implementing from the start. I knew it can be annoying to go back and integrate translations. Luckily, with react and node, we get the use of libraries to make this really easy. I used i18next which made dynamic translations really easy with react hooks. Basically you setup a bunch of JSON files for each language you want and than use a key/pair value for retrieving specific words/sentences. The library has a function to switch the language anywhere, making it really easy to do. Basically, for my content, instead of storing names, I store the keys to the translations, making it easy to translate. I also have a dud value on each item that makes looking through the items not too bad. At the start of the game, users just select their language and it all works real nice.

Are you using TypeScript? It helps me a lot when doing it with local json-files, because you can’t make reference mistakes really. Also, i18next is pretty great 👍

In this section you'll see how we can internationalize the new app directory with the use of i18next, react-i18next and i18next-resources-to-backend. npm install i18next react-i18next i18next-resources-to-backend

For i18n I used i18next. Here's how I integrated it: https://svelte.dev/repl/c9e87632ada543c8a0780ae8ac603441?version=3.53.1

Now inside tag add onChange method, this is where we get values from options provided and pass it to i18n to change language i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English Enter fullscreen mode Exit fullscreen mode Final App.js import logo from './logo.svg'; import './App.css'; import { useTranslation } from 'react-i18next'; function App() { const { t, i18n } = useTranslation() return (

Edit src/App.js and save to reload.

i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English {t('welcome')}
{t('goodbye')}

); } export default App; Enter fullscreen mode Exit fullscreen mode Result Translation optimization Step 1: Now, did you noticed our translations are located inside i18n.js file. We haven't yet started splitting translations into multiple files (which is highly recommended for larger projects) but we already see that adding more languages would result in bundling unneeded translations into the application. In order to separate our translation we will use package namely i18next-http-backend, which helps us to load our translations asynchronously. Install i18next-http-backend by running this code on terminal npm install i18next-http-backend Enter fullscreen mode Exit fullscreen mode Now we need to wire up i18next-http-backend into our i18n.js file import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import backend from "i18next-http-backend"; // <--- import here i18n .use(initReactI18next) // passes i18n down to react-i18next .use(backend) // <--- wire up here .init({ // the translations // (tip move them in a JSON file and import them, // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui) resources: { uz: { translation: { welcome: "Xush kelibsiz", goodbye: "Xayr" } }, ru: { translation: { welcome: "Добро пожаловать", goodbye: "До свидания" } }, en: { translation: { welcome: "Welcome", goodbye: "Goodbye" } } }, lng: "en", // if you're using a language detector, do not define the lng option fallbackLng: "en", interpolation: { escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape } }); Enter fullscreen mode Exit fullscreen mode Once we connected i18next-http-backend, by default it will load translation from this path '../public/locales/{lang}/translation.json' Enter fullscreen mode Exit fullscreen mode This path considered to be the default for the i18next-http-backend to load from. Step 2: We need to create this path locales/{lang}/translation.json inside public folder. Now we need to remove this part of code from i18n.js file And add our translations inside translation.json file for each language. UZ RU EN Now check result on browser Final Result Link to full source of tutorial here Reference list i18next React.i18next Locize Geeksforgeeks Legacy-v9