react-i18next VS i18next

The most apps I've worked with, have two languages at least so the next challenge was to find a library among many to get the job done. After spending hours, react-i18next attracted my attention however after reading the documentation, I realized I should write a simple library because I didn't want to spend hours to learn a package for doing a simple job and also load many packages.

Internalization your React app, provide app language support or translate the app into multiple languages using i18next, react-118next

This approach works particularly well for growing applications, allowing team members to work on different features without conflicts. For more information, check out the documentation for react-i18next, i18next, and js-cookie.

Multi-language support: Simplify multi-language support in your apps. 🌍 Features include lazy loading, pluralization, and advanced formatting for smooth localization. 🔗react.i18next.com/

In a recent project I've been using react-i18next so I'll use its syntax for the examples, but pretty much every library works similarly.

react-i18next

i18next - You can find documentation and resources for using i18next at react.i18next.com. i18next is a popular internationalization framework for JavaScript, including React. It provides a comprehensive solution for handling translations, formatting, and more.

i18next.t($ => $.my.nested.key)

The change unlocks IDE autocompletion and “go to definition”, preserves JSDoc from your resource files at the call site, and — critically — removes the huge type-level unions that used to grind TypeScript/IDEs to a halt. See the announcement and examples.

The selector support has landed in i18next (PR merged) and react-i18next has matching typings/changes. If you want to migrate, there’s an automated codemod to convert usages to the selector form.

Why share this here: if you use TypeScript + i18next, this should make working with large translation catalogs far more pleasant — less “doom scrolling”, much better editor UX, and big type-performance improvements. We’d love feedback from folks who try the codemod or hit edge cases. => https://github.com/i18next/i18next/pull/2322

The first step to implementing translations in a React app is to choose an appropriate library. One of the most popular libraries in the React ecosystem is i18next, which provides powerful features for internationalization. It allows you to easily manage translations, plural forms, and formatting.

This approach works particularly well for growing applications, allowing team members to work on different features without conflicts. For more information, check out the documentation for react-i18next, i18next, and js-cookie.

import i18n from 'i18next' import { initReactI18next } from 'react-i18next' import LanguageDetector from 'i18next-browser-languageDetector' import LocizeBackend from 'i18next-locize-backend' import LastUsed from 'locize-lastused' import { locizePlugin } from 'locize' const isDev = import.meta.env.DEV const locizeOptions = { projectId: import.meta.env.VITE_LOCIZE_PROJECTID, apiKey: import.meta.env.VITE_LOCIZE_APIKEY // // YOU should not expose your apps API key to production!!! } if (isDev) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18n.use(LastUsed) } i18n // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(LocizeBackend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // Bind i18next to React .use(initReactI18next) // InContext Editor of locize .use(locizePlugin) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: isDev, // Enable logging for development fallbackLng: 'en', // Default language backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: isDev // you should not use saveMissing in production }) export default i18n In src/main.tsx, import the i18n.ts configuration before rendering the app:

In this section, we will translate our previous web page to French and Spanish. The first step to achieve this is to install the i18next and react-i18next packages. i18next is an internationalization framework that makes localization possible for JavaScript, and react-i18next is specifically for React.

E2E-testing localized applications can be challenging, translations keys can make test code harder to read and maintain. This article demonstrates how to test i18next translations in React app using Playwright, with a simplified approach that avoids translation keys. The idea can be used in any project with i18next or similar libraries.

Next.js Internationalized Routing Next.js provides built-in support for internationalized routing. This page will introduce you to the fundamental concepts of i18n routing in Next.js and how to handle it. More Info i18next A popular library for internationalization that provides a complete set of tools for handling translation, formatting, and routing for i18n. More Info

🌍 i18next Documentation

i18next is a popular internationalization library for JavaScript applications. It provides a robust framework for managing translations, formatting dates, numbers, and handling pluralization. i18next supports multiple backends for storing translations, making it versatile and adaptable to various project requirements.

For this article, we'll leverage the 'Simple CRM' project from our previous list of projects. We'll integrate and utilize the i18n library to internationalize our application.