i18next: Der komplette Internationalisierungs-Framework-Guide für 2026

Schnelle Antwort

i18next ist das populärste JavaScript Internationalisierungs-Framework mit 8M+ wöchentlichen npm-Downloads. Installieren mit npm install i18next, konfigurieren mit i18n.init({ lng: 'en', resources: {...} }), dann i18n.t('key') aufrufen zum Übersetzen. Es funktioniert in jeder JavaScript-Umgebung—React, Vue, Node.js, vanilla JS, mobile Apps.

---

Was ist i18next?

i18next ist eine framework-agnostische Internationalisierungs (i18n) Bibliothek für JavaScript. Erstellt 2011, ist es die am meisten kampferprobte i18n-Lösung mit:

• Universeller Support: Browser, Node.js, React Native, Electron, Deno
• Framework Bindings: React, Vue, Angular, Svelte, Next.js
• Plugin Ökosystem: 50+ Plugins für Backends, Erkennung, Caching
• Enterprise-ready: Genutzt von Microsoft, Adobe, Airbnb

---

Kernkonzepte

1. Übersetzungsdateien (Resources)

Übersetzungen sind als JSON-Objekte mit verschachtelten Keys organisiert:

JSONCopy
1{
2  "greeting": "Hallo!",
3  "nav": {
4    "home": "Startseite",
5    "about": "Über uns"
6  }
7}

2. Namespaces

Namespaces teilen Übersetzungen in logische Gruppen:

locales/
├── de/
│   ├── common.json    # Geteilte Strings
│   ├── auth.json      # Authentifizierung
│   └── dashboard.json # Dashboard-Seite

3. Fallback-Kette

Wenn eine Übersetzung fehlt:

1. Angeforderte Sprache prüfen (de-AT)
2. Elternsprache prüfen (de)
3. Fallback-Sprache prüfen (en)
4. Key oder Standardwert zurückgeben

---

Grundlegendes Setup

Installation

TerminalCopy
npm install i18next

Minimale Konfiguration

JavaScriptCopy
1import i18next from 'i18next';
2
3i18next.init({
4  lng: 'de',
5  resources: {
6    de: {
7      translation: {
8        greeting: 'Hallo, Welt!',
9        welcome: 'Willkommen in unserer App',
10      },
11    },
12  },
13});
14
15console.log(i18next.t('greeting')); // "Hallo, Welt!"

---

Variablen-Interpolation

Grundlegende Variablen

JSONCopy
1{
2  "greeting": "Hallo, {{name}}!",
3  "cartInfo": "Sie haben {{count}} Artikel im Wert von {{total}}"
4}

JavaScriptCopy
i18next.t('greeting', { name: 'Hans' });
// "Hallo, Hans!"

---

Pluralisierung

Grundlegende Plurale

JSONCopy
1{
2  "item_one": "{{count}} Artikel",
3  "item_other": "{{count}} Artikel"
4}

JavaScriptCopy
i18next.t('item', { count: 1 });  // "1 Artikel"
i18next.t('item', { count: 5 });  // "5 Artikel"

---

Namespaces

JavaScriptCopy
1i18next.init({
2  ns: ['common', 'auth', 'dashboard'],
3  defaultNS: 'common',
4});
5
6i18next.t('submit');           // Von common (Standard)
7i18next.t('auth:login');       // Von auth Namespace
8i18next.t('dashboard:title');  // Von dashboard Namespace

---

Plugin-System

Spracherkennung

JavaScriptCopy
1import LanguageDetector from 'i18next-browser-languagedetector';
2
3i18next.use(LanguageDetector).init({
4  detection: {
5    order: ['querystring', 'cookie', 'localStorage', 'navigator'],
6    caches: ['localStorage', 'cookie'],
7  },
8});

HTTP Backend

JavaScriptCopy
1import HttpBackend from 'i18next-http-backend';
2
3i18next.use(HttpBackend).init({
4  backend: {
5    loadPath: '/locales/{{lng}}/{{ns}}.json',
6  },
7});

---

TypeScript Support

Type-sichere Keys

TypeScriptCopy
1// types/i18next.d.ts
2import 'i18next';
3import de from '../locales/de/common.json';
4
5declare module 'i18next' {
6  interface CustomTypeOptions {
7    defaultNS: 'common';
8    resources: {
9      common: typeof de;
10    };
11  }
12}

TypeScriptCopy
i18next.t('greeting');    // ✅ Autocomplete funktioniert
i18next.t('nonexistent'); // ❌ TypeScript Fehler

---

Produktions-Best-Practices

1. Dateiorganisation

src/
├── i18n/
│   ├── index.ts           # i18next Konfiguration
│   ├── types.d.ts         # TypeScript Deklarationen
│   └── locales/
│       ├── en/
│       │   ├── common.json
│       │   └── errors.json
│       └── de/
│           ├── common.json
│           └── errors.json

2. Key-Namenskonvention

JSONCopy
1{
2  "page.section.element": "Wert",
3  "auth.login.title": "Anmelden",
4  "errors.validation.required": "Dieses Feld ist erforderlich"
5}

---

Skalieren mit IntlPull

JSON-Dateien manuell zu verwalten bricht bei Skalierung zusammen. IntlPull integriert direkt mit i18next:

TerminalCopy
1# Initialisieren
2npx @intlpullhq/cli init
3
4# Keys aus Code extrahieren
5npx @intlpullhq/cli extract
6
7# Zu IntlPull hochladen
8npx @intlpullhq/cli upload
9
10# Mit KI übersetzen
11npx @intlpullhq/cli translate --target de,es,fr
12
13# Übersetzungen herunterladen
14npx @intlpullhq/cli download

Vorteile

---

Zusammenfassung

i18next ist das Industrie-Standard JavaScript Internationalisierungs-Framework:

Für Produktions-Apps kombinieren Sie i18next mit IntlPull für KI-Übersetzung, OTA-Updates und Team-Kollaboration.

Bereit Ihr i18n zu vereinfachen? Starten Sie kostenlos mit IntlPull