# i18next — Internationalization Framework for JavaScript

> A full-featured internationalization library for JavaScript that provides translation loading, pluralization, interpolation, and framework integrations for React, Vue, and more.

## Install

Save as a script file and run:

# i18next — Internationalization Framework for JavaScript

## Quick Use
```bash
npm install i18next
```
```js
import i18next from 'i18next';

await i18next.init({
  lng: 'en',
  resources: {
    en: { translation: { greeting: 'Hello, {{name}}!' } },
    es: { translation: { greeting: 'Hola, {{name}}!' } }
  }
});

console.log(i18next.t('greeting', { name: 'World' }));
// Hello, World!
```

## Introduction
i18next is a JavaScript internationalization framework that goes beyond simple string lookup. It supports pluralization, context-based translations, interpolation, nested keys, and namespace separation, making it suitable for applications that need to support dozens of languages with complex grammatical rules.

## What i18next Does
- Translates UI strings with key-based lookup and namespace separation
- Handles pluralization rules for languages with complex plural forms
- Interpolates dynamic values, dates, and numbers into translated strings
- Loads translation resources from JSON files, remote APIs, or bundled modules
- Integrates with React, Vue, Angular, Svelte, and Node.js via official plugins

## Architecture Overview
i18next maintains a resource store organized by language, namespace, and key path. When `t()` is called, the resolver walks the key path in the current language, falling back to configured fallback languages if a key is missing. A plugin system handles resource loading (backends), language detection, caching, and post-processing. Framework bindings (react-i18next, vue-i18next) subscribe to language-change events and trigger re-renders when the active language switches.

## Setup & Configuration
- Install the core library and a framework binding (e.g., `npm install i18next react-i18next`)
- Initialize with `i18next.init()` passing language, fallback language, and resources or a backend plugin
- Organize translations by namespace to split large projects into loadable chunks
- Use `i18next-http-backend` to load translations lazily from a server
- Add `i18next-browser-languagedetector` to auto-detect the user's preferred language

## Key Features
- Supports plural rules for all CLDR languages out of the box
- Interpolation with formatting, nesting, and context-dependent translations
- Namespace-based code splitting for lazy-loaded translation files
- Active plugin ecosystem: 30+ backends, detectors, and post-processors
- Server-side rendering support for frameworks like Next.js

## Comparison with Similar Tools
- **FormatJS (react-intl)** — tightly coupled to React and ICU message format; i18next is framework-agnostic
- **vue-i18n** — Vue-specific; i18next works across frameworks with adapters
- **Lingui** — compile-time message extraction with smaller runtime; i18next is more flexible at runtime
- **gettext / po files** — classic server-side approach; i18next is JavaScript-native with JSON resources

## FAQ
**Q: How does i18next handle languages with complex plural rules?**
A: It uses CLDR plural categories (zero, one, two, few, many, other) and automatically selects the correct form based on the count and language rules.

**Q: Can I load translations on demand?**
A: Yes. Use a backend plugin like i18next-http-backend to fetch namespace files from a server only when needed.

**Q: Does i18next work with server-side rendering?**
A: Yes. Initialize i18next on the server with the desired language and pass the translations to the client for hydration.

**Q: How do I extract translation keys from source code?**
A: Use the i18next-parser tool to scan your codebase and generate JSON files with all referenced keys.

## Sources
- https://github.com/i18next/i18next
- https://www.i18next.com/

---
Source: https://tokrepo.com/en/workflows/asset-0e3187c7
Author: Script Depot