React + react-i18next: Der komplette Internationalisierungs-Guide [2026]

Schnelle Antwort

Um Internationalisierung in React mit react-i18next zu implementieren, musst du das Paket installieren, deine Sprach-Provider konfigurieren und die Übersetzungs-Hooks/-Komponenten verwenden. react-i18next ist eine Standardwahl für React-Entwickler im Jahr 2026 und bietet robuste Funktionen für Sprachwechsel, Pluralisierung und Formatierung.

---

Einführung

Der Aufbau einer globalen Anwendung mit React erfordert eine solide Strategie für Internationalisierung. In diesem Guide gehen wir durch, wie man react-i18next von Grund auf einrichtet, gemeinsame Herausforderungen meistert und deinen Workflow für 2026 optimiert.

Warum react-i18next?

• Popularität: Weit verbreitet im React-Ökosystem.
• Funktionen: Unterstützt Plurale, Kontext und Interpolation.
• Community: Umfangreiche Dokumentation und Beispiele.

---

Schritt 1: Installation

Füge zuerst die Abhängigkeit zu deinem Projekt hinzu:

TerminalCopy
npm install react-i18next i18next

Schritt 2: Konfiguration

Konfiguriere i18next im Stammverzeichnis deiner Anwendung (oft in einer i18n.js Datei).

JavaScriptCopy
1import i18n from "i18next";
2import { initReactI18next } from "react-i18next";
3
4i18n
5  .use(initReactI18next)
6  .init({
7    resources: {
8      en: {
9        translation: {
10          "Welcome": "Welcome to React"
11        }
12      },
13      de: {
14        translation: {
15          "Welcome": "Willkommen bei React"
16        }
17      }
18    },
19    lng: "en",
20    fallbackLng: "en",
21    interpolation: {
22      escapeValue: false
23    }
24  });
25
26export default i18n;

Schritt 3: Verwendung

So übersetzt du einen String in einer Komponente:

JavaScriptCopy
1import React from 'react';
2import { useTranslation } from 'react-i18next';
3
4export function MeineKomponente() {
5  const { t } = useTranslation();
6  return <h1>{t('Welcome')}</h1>;
7}

---

Verwaltung von Übersetzungen mit IntlPull

Wenn deine App wächst, wird die Verwaltung von JSON-Dateien schwierig. IntlPull automatisiert diesen Workflow:

1. Extrahieren: Ziehe Schlüssel aus deinem React-Code.
2. Übersetzen: Verwende KI, um in 50+ Sprachen zu übersetzen.
3. Synchronisieren: Pushe Updates zurück in dein Repo.

TerminalCopy
npx @intlpullhq/cli push

---

Fazit

Die Implementierung von Internationalisierung in React ist mit react-i18next einfach.

• Installiere das Paket
• Konfiguriere i18n
• Verwende den useTranslation Hook
• Verwende IntlPull, um deine Übersetzungen effizient zu verwalten.