Der komplette Guide zu React Internationalisierung (i18n) 2026

Schnelle Antwort

Um Internationalisierung (i18n) zu React hinzuzufügen, verwenden Sie react-i18next. Installieren mit npm install react-i18next i18next, JSON-Übersetzungsdateien erstellen, i18next mit Ihren Sprachen konfigurieren und den useTranslation Hook verwenden (const { t } = useTranslation()) um übersetzte Strings anzuzeigen. Für Next.js-Projekte verwenden Sie stattdessen next-intl für bessere App Router Integration. IntlPull kann Übersetzungen verwalten und KI-gestützte Übersetzung bieten wenn Sie über JSON-Dateien hinauswachsen.

---

Einführung in React Internationalisierung

Das Bauen einer React-Anwendung für ein globales Publikum erfordert ordentliche Internationalisierung (i18n). Dieser Guide deckt alles ab was Sie über die Implementierung von i18n in React-Anwendungen wissen müssen, von grundlegem Setup bis hin zu fortgeschrittenen Patterns.

Warum Internationalisierung wichtig ist

• Globale Märkte erreichen: 75% der Internetnutzer bevorzugen Inhalte in ihrer Muttersprache
• Konversion steigern: Lokalisierte Apps sehen bis zu 70% höhere Konversionsraten
• Bessere UX: Benutzer interagieren mehr mit Inhalten die sie voll verstehen
• SEO-Vorteile: Lokalisierter Content rankt besser in regionalen Suchergebnissen

Eine i18n-Bibliothek wählen

react-i18next

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function App() {
4  const { t } = useTranslation();
5  return <h1>{t('greeting')}</h1>;
6}

Vorteile:

• Leichtgewichtig und flexibel
• Toller TypeScript-Support
• Plugin-Ökosystem (Backends, Spracherkennung)

next-intl (für Next.js)

JSXCopy
1import { getTranslations } from 'next-intl/server';
2
3async function HomePage() {
4  const t = await getTranslations('home');
5  return <h1>{t('title')}</h1>;
6}

Vorteile:

• Speziell für Next.js gebaut
• Server-Component-Support
• Automatisches Routing

Ihr Projekt einrichten

Schritt 1: Abhängigkeiten installieren

TerminalCopy
npm install react-i18next i18next

Schritt 2: Übersetzungsdateien erstellen

/locales
  /en
    common.json
    home.json
  /de
    common.json
    home.json

Schritt 3: i18next konfigurieren

JavaScriptCopy
1// i18n.js
2import i18n from 'i18next';
3import { initReactI18next } from 'react-i18next';
4
5i18n
6  .use(initReactI18next)
7  .init({
8    resources: {
9      en: { translation: require('./locales/en/common.json') },
10      de: { translation: require('./locales/de/common.json') },
11    },
12    lng: 'en',
13    fallbackLng: 'en',
14    interpolation: { escapeValue: false },
15  });
16
17export default i18n;

Schritt 4: Ihre App wrappen

JSXCopy
1import './i18n';
2
3function App() {
4  return (
5    <Suspense fallback="Lädt...">
6      <YourApp />
7    </Suspense>
8  );
9}

Fortgeschrittene Patterns

Pluralisierung handhaben

JSONCopy
1{
2  "items": "Sie haben {{count}} Artikel",
3  "items_plural": "Sie haben {{count}} Artikel"
4}

JSXCopy
t('items', { count: 5 }) // "Sie haben 5 Artikel"

Interpolation mit Komponenten

JSXCopy
<Trans i18nKey="welcome" components={{ strong: <strong /> }}>
  Willkommen, <strong>{{name}}</strong>!
</Trans>

Lazy Loading von Übersetzungen

JavaScriptCopy
1i18n.use(Backend).init({
2  backend: {
3    loadPath: '/locales/{{lng}}/{{ns}}.json',
4  },
5});

Übersetzungen skaliert verwalten

Wenn Ihre App wächst, wird manuelles JSON-Datei-Management schmerzhaft:

• Versionskonflikte: Mehrere Entwickler bearbeiten dieselben Dateien
• Fehlende Übersetzungen: Schwer zu tracken was übersetzt ist
• Kein Kontext: Übersetzer sehen nicht wo Strings verwendet werden
• Langsamer Workflow: Manuelle Export/Import-Zyklen

Die Lösung: Translation Management Systems

Ein TMS wie IntlPull löst diese Probleme:

TerminalCopy
1# Neueste Übersetzungen holen
2npx @intlpullhq/cli download
3
4# Neue Strings pushen
5npx @intlpullhq/cli upload
6
7# Übersetzungsstatus prüfen
8npx @intlpullhq/cli status

Best Practices

1. Alle Strings extrahieren

Nie hardcoded Text lassen:

JSXCopy
1// Schlecht
2<button>Absenden</button>
3
4// Gut
5<button>{t('form.submit')}</button>

2. Bedeutungsvolle Keys verwenden

JSONCopy
1// Schlecht
2{
3  "text1": "Willkommen",
4  "text2": "Registrieren"
5}
6
7// Gut
8{
9  "home.hero.title": "Willkommen",
10  "auth.signup.button": "Registrieren"
11}

3. RTL-Sprachen handhaben

JSXCopy
<div dir={isRTL ? 'rtl' : 'ltr'}>
  {children}
</div>

4. Daten und Zahlen richtig formatieren

JSXCopy
1const formattedDate = new Intl.DateTimeFormat(locale).format(date);
2const formattedPrice = new Intl.NumberFormat(locale, {
3  style: 'currency',
4  currency: 'EUR',
5}).format(price);

Häufige Fehler vermeiden

1. String-Konkatenation: Stattdessen Interpolation verwenden
2. Hardcoded Formatierung: Die i18n-Bibliothek handhaben lassen
3. Kontext ignorieren: Dasselbe Wort kann verschiedene Übersetzungen haben
4. RTL nicht testen: Mit Arabisch oder Hebräisch testen
5. Manuelles Datei-Management: Ein TMS verwenden

Fazit

React-Internationalisierung muss nicht komplex sein. Starten Sie mit einem soliden Fundament, folgen Sie Best Practices und nutzen Sie die richtigen Tools um Übersetzungen skaliert zu verwalten.

Nächste Schritte:

1. react-i18next oder next-intl in Ihrem Projekt einrichten
2. Existierende hardcoded Strings extrahieren
3. Mit IntlPull für Übersetzungsmanagement verbinden
4. KI-gestützte Übersetzungen für schnelle Lokalisierung hinzufügen

Bereit Ihren React i18n Workflow zu vereinfachen? Starten Sie Ihre kostenlose IntlPull-Testversion und verwalten Sie Übersetzungen wie ein Profi.