i18n-multi-lang

What is i18n?

Internationalization (i18n) is the process of adapting a product or application to a different language or region.

Installation

npm install i18next
npm install i18next-browser-languagedetector
npm install react-i18next

How i18n Works "Behind the Scenes"

Think of i18next as a Global State Manager specifically for text.

The Registry: When the app starts, i18n.init creates a large object (the resources) where every piece of text is stored under a "key" (like title).

The Provider: react-i18next wraps your app in a context. This context listens for any changes to the "active language."

The t() function: When you call t('title'), the library looks at the current language (e.g., es) and goes into your resources to find the value for es.translation.title.

Re-rendering: When you call i18n.changeLanguage('hi'), the library updates its internal state. Because your component is hooked into useTranslation, React detects this state change and re-renders only the text parts of your UI with the new language.

Persistence: If you are using the LanguageDetector, the moment you call changeLanguage, the library automatically writes that value to your browser's localStorage. Next time you refresh, it reads from there first.

Q&A

What is "Escaping"?

Escaping is the process of converting special characters (like < and >) into safe "HTML entities" (like < and >). This prevents a hacker from injecting a malicious <script> tag into your page via a translation string.

Why do we set it to false in React?

Usually, escaping is a good thing. However, React already does this automatically. React is built to be secure by default. If you try to render a string that contains a script, React will automatically "escape" it before it hits the browser.

If escapeValue was true: i18next would escape the string, and then React would escape it again. This is double-processing and can sometimes mess up how special characters (like & or accented letters) look on the screen.

By setting it to false: You are telling i18next: "Hey, don't worry about security; React has already got it covered."

Strategies -

Namespaces (Code Splitting for Text)

In a massive app, you don't want to load the translations for the "Dashboard," "Settings," and "Landing Page" all at once. It makes the initial load slow.

Namespacing allows you to split your JSON files by feature.

common.json: Buttons like "Save", "Cancel".

profile.json: Labels specific only to the Profile page.

Trans Component (Rich Text Formatting)

The t() function is great for plain strings. But what if you want a sentence where one word is bold, another is a [link], and another is an icon? If you split these into three different keys, the sentence structure breaks in other languages.

//The Solution: The <Trans> component.

import { Trans } from 'react-i18next';

<Trans i18nKey="my_key">
  Welcome <b>{{name}}</b>. Click <a href="/setup">here</a> to start.
</Trans>

src/
├── assets/
│   └── locales/             # Centralized translation storage
│       ├── en/
│       │   ├── common.json  # Shared UI strings (Buttons, Nav)
│       │   ├── auth.json    # Authentication specific strings
│       │   └── home.json    # Home page specific strings
│       └── es/
│           ├── common.json
│           └── ...
├── core/
│   └── i18n/                # i18n Configuration
│       ├── i18n.ts          # Main init script (i18next/react-i18next)
│       └── constants.ts     # Supported languages, default locale
├── hooks/
│   └── useLanguage.ts       # Custom hook for language switching logic
└── components/
    └── LanguageSwitcher/    # Reusable UI for changing languages