PTC
Registrieren Auf Pro upgraden Ihr Konto

So übersetzen Sie eine React-App mit react-i18next

Richten Sie react-i18next ein, übersetzen Sie en.json mit KI in über 40 Sprachen und lassen Sie anschließend die Browser-Erweiterung von PTC (Private Translation Cloud) die laufende React-App bei jedem Release prüfen. Dieser Leitfaden behandelt die React-Internationalisierung von Anfang bis Ende: das Einrichten von react-i18next, den Umgang mit Pluralformen und dynamischen Inhalten, das Übersetzen Ihrer en.json mit PTC in über 40 Sprachen und das Umschalten der Sprache zur Laufzeit. Am Ende verfügen Sie über ein funktionierendes React-Lokalisierungs-Setup, das versandbereit ist. Eine Übersicht über das eigenständige JSON-Übersetzungstool finden Sie unter JSON-Dateien online mit KI übersetzen.

Wie eine lokalisierte React-App aussieht

Eine React-App, bei der:

  • Alle für Benutzer sichtbaren Strings in JSON-Übersetzungsdateien unter src/i18n/locales/ (oder public/locales/) liegen.
  • Ein Sprachumschalter zwischen Englisch, Spanisch, Französisch und Deutsch wechselt.
  • Dynamische Inhalte (Benutzernamen, Zähler, Datumsangaben) pro Sprache korrekt interpoliert werden.
  • Pluralformen den Regeln der jeweiligen Zielsprache folgen.
  • Die übersetzten .json-Dateien von PTC erzeugt und nicht von Hand geschrieben werden.

Schritt 1: Eine React-+-TypeScript-App mit Vite einrichten

Dieser Leitfaden verwendet eine React-+-TypeScript-App, die mit Vite erstellt wurde. Wenn Sie react-i18next zu einer bestehenden App hinzufügen, springen Sie direkt zu Schritt 2.

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

Dies startet einen Entwicklungsserver und öffnet die standardmäßige Vite-+-React-Seite in Ihrem Browser.

Schritt 2: react-i18next installieren und fest codierte Strings durch t() ersetzen

npm install i18next react-i18next

Erstellen Sie Ihre React-i18n-Ordnerstruktur:

src/
  i18n/
    locales/
      en.json

Fügen Sie Ihre englischen Strings zu src/i18n/locales/en.json hinzu:

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

Eine typische React-Komponente mit fest codierten Strings:

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This is a localization demo.</p>
      <button onClick={() => alert('Click me')}>Click me</button>
    </div>
  );
}

Ersetzen Sie den fest codierten Text durch den useTranslation-Hook:

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

useTranslation() gibt zurück:

  • t() - schlägt einen String anhand eines Schlüssels nach.
  • i18n - ermöglicht es Ihnen, Sprachen programmatisch zu wechseln.

Schritt 3: Jede Sprach-JSON automatisch mit import.meta.glob laden

Erstellen Sie src/i18n/index.ts, um i18next zu konfigurieren und Übersetzungsdateien automatisch zu laden. Das import.meta.glob-Muster bedeutet, dass jede .json-Datei, die Sie zu src/i18n/locales/ hinzufügen, automatisch erfasst wird. Keine manuellen Importe, wenn Sie neue Sprachen hinzufügen:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

type TranslationResources =
  | string
  | { [k: string]: TranslationResources }
  | TranslationResources[];

const modules = import.meta.glob<{ default: Record<string, TranslationResources> }>(
  './locales/*.json',
  { eager: true }
);

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};
for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

Importieren Sie i18n, bevor Ihre App gerendert wird. Öffnen Sie src/main.tsx und fügen Sie den Import hinzu:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import './i18n'; // <- add this

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Wenn Sie diesen Schritt überspringen, gibt t() Übersetzungsschlüssel statt übersetzten Text zurück.

Variablen mit {{variableName}} interpolieren

Verwenden Sie die {{variableName}}-Syntax in Ihrer JSON und übergeben Sie den Wert an t(). Aktualisieren Sie en.json:

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}
const user = { firstName: 'Sarah' };
<p>{t('userGreeting', { firstName: user.firstName })}</p>

Das zweite Argument von t() ist ein Objekt mit den Werten, die Sie ersetzen möchten. So viele Variablen, wie Sie benötigen.

Mit den Suffixen _one / _other pluralisieren

Verwenden Sie das Suffixmuster _one / _other. Die Variable muss count heißen:

{
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages."
}
<p>{t('newMessages', { count: messageCount })}</p>

i18next wählt die korrekte Pluralform automatisch aus. Es verarbeitet auch Sprachen mit mehr als zwei Pluralformen (Polnisch, Arabisch, Russisch) ohne zusätzliche Konfiguration.

Verwenden Sie für Übersetzungen, die HTML-Elemente wie Links oder fett gedruckten Text enthalten, die Trans-Komponente:

{
  "termsText": "I agree to the <1>Terms of Service</1> and <3>Privacy Policy</3>."
}

Die Tags <1> und <3> sind indexbasierte Platzhalter, die untergeordneten Elementen zugeordnet werden (gezählt ab 0):

import { Trans } from 'react-i18next';

<Trans i18nKey="termsText">
  I agree to the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>.
</Trans>

Dadurch bleiben Ihre JSX-Elemente in der Komponente, während Übersetzer den umgebenden Text dennoch natürlich umstellen können.

Datumsangaben, Zahlen und Währungen mit Intl formatieren

Verwenden Sie Intl-Formatierer, anstatt Formatstrings in Ihre Übersetzungen einzubetten:

const formatDate = (date: Date, locale: string) =>
  new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(date);

const formatCurrency = (amount: number, locale: string, currency: string) =>
  new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount);

const { i18n } = useTranslation();
<p>{formatDate(new Date(), i18n.language)}</p>
<p>{formatCurrency(199.99, i18n.language, 'EUR')}</p>

Schritt 5: Die JSON-Dateien mit PTC in 5 Schritten übersetzen

Sie haben jetzt en.json und müssen es.json, fr.json, de.json usw. erzeugen. PTC ist genau dafür konzipiert.

  1. Starten Sie ein PTC-Projekt und wählen Sie Englisch als Quelle. Die kostenlose Testphase umfasst 20.000 Wörter in 2 Sprachen, ohne Kreditkarte.
  2. Laden Sie en.json hoch. PTC analysiert die verschachtelte Struktur, erkennt i18next-Platzhalter ({{name}}, {{count}}) und erkennt die Plural-Suffixe (_one, _other).
  3. Fügen Sie eine kurze Beschreibung Ihrer React-App und ihrer Zielgruppe hinzu. PTC nutzt diesen Kontext, um Tonfall und Terminologie über alle Sprachen hinweg abzustimmen.
  4. Wählen Sie die Zielsprachen aus und bestätigen Sie. PTC erzeugt eine übersetzte .json pro Zielsprache, strukturell identisch mit der Quelle. Gleiche Schlüssel, gleiche Verschachtelung, gleiche Platzhalter. Übersetzte Werte.
  5. Legen Sie die Dateien in src/i18n/locales/ ab. Dank des automatischen Ladens über import.meta.glob, das Sie in Schritt 3 eingerichtet haben, funktionieren die neuen Dateien sofort, ohne Codeänderungen.

Sobald Sie Ihre erste Datei mit PTC übersetzt haben, können Sie zu einem automatisierten Prozess übergehen. Verbinden Sie Ihr GitHub-, GitLab- oder Bitbucket-Repository über die Git-Integration oder nutzen Sie die PTC API, um die Übersetzung in Ihre CI/CD-Pipeline einzubinden. Neue Strings in en.json lösen eine automatische Übersetzung aus. PTC öffnet einen PR mit aktualisierten Dateien in der Zielsprache.

Schritt 6: Das Setup mit einem Sprachumschalter überprüfen

Fügen Sie Sprachschaltflächen hinzu, um zu überprüfen, ob Ihr react-i18next-Setup funktioniert:

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
  );
}

i18n.changeLanguage() löst ein erneutes Rendern jeder Komponente aus, die useTranslation() verwendet, sodass sich die gesamte Benutzeroberfläche sofort aktualisiert. Kein Neuladen der Seite.

Die Sprache des Benutzers automatisch mit i18next-browser-languagedetector erkennen

Installieren Sie i18next-browser-languagedetector, um die richtige Sprache automatisch aus den Browsereinstellungen, der URL oder den gespeicherten Präferenzen des Benutzers zu laden:

npm install i18next-browser-languagedetector
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'],
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
  });

Übersetzungen mit i18next-http-backend bei Bedarf laden

Standardmäßig werden alle Übersetzungsdateien zur Build-Zeit gebündelt. Verwenden Sie für Apps mit vielen Sprachen i18next-http-backend, um nur die Sprache abzurufen, die der Benutzer tatsächlich benötigt:

npm install i18next-http-backend
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
  });

Verschieben Sie Ihre Übersetzungsdateien nach public/locales/, damit sie als statische Assets ausgeliefert werden:

public/
  locales/
    en/translation.json
    fr/translation.json

Beim Umschalten auf Französisch wird nun /locales/fr/translation.json bei Bedarf abgerufen, anstatt es zu bündeln. Das anfängliche Bundle bleibt schlank, unabhängig davon, wie viele Sprachen Sie unterstützen.

Visuelle Übersetzungsprüfung Ihrer laufenden React-App - versenden ohne manuelle QA pro Release

Nachdem PTC Ihre en.json übersetzt hat, müssen Sie die laufende React-App dennoch überprüfen. Ein übersetztes Label kann eine Schaltfläche im Deutschen sprengen. "Save" könnte im Französischen als Substantiv übersetzt werden, obwohl die Benutzeroberfläche ein Verb benötigte. Ein fest codierter englischer String außerhalb von t() wird unübersetzt gerendert, ganz gleich, wie viele Sprachen Sie ausliefern.

Die visuelle KI-Prüfung von PTC ersetzt den manuellen QA-Durchlauf. Für browserbasierte Apps wie React ist die passende Variante die Browser-Erweiterung. Installieren Sie sie einmal und zeichnen Sie eine kurze Begehung der kritischen Benutzerabläufe Ihrer React-App auf (Anmeldung, Hauptfunktion, Einstellungen). Von da an spielt PTC die Aufzeichnung nach jeder Übersetzungsaktualisierung in jeder Zielsprache erneut ab, erfasst jeden Bildschirm und prüft das gerenderte Ergebnis:

  • Korrekturen in den Übersetzungsdateien, wenn PTC sie kontrolliert. PTC übersetzt eine falsche Wortart neu, wählt ein kürzeres Synonym, das auf eine Schaltfläche passt, oder erzeugt eine Pluralform neu.
  • Cursor- / Claude-Code-Prompts, wenn das Problem in Ihrem Komponentencode liegt. Ein fest codierter englischer String außerhalb von t(), ein durch String-Verkettung statt durch t('key', { var }) gebildeter Satz, eine fehlende Trans-Komponente für Rich-Text-Übersetzungen.

Das Ergebnis: Prüfung als CI-Schritt. Jedes Release wird mit visueller Verifizierung über jede Zielsprache hinweg ausgeliefert, ohne menschlichen Engpass.

Release-Notes, Marketingseiten und Kunden-E-Mails übersetzen

Ihre Release-Notes, Marketingseiten, Landingpages und Kunden-E-Mails liegen außerhalb von en.json. Die Funktion „Paste to Translate“ von PTC verarbeitet diese Texte im selben Projekt. Fügen Sie den Quelltext im PTC-Dashboard ein, wählen Sie die Zielsprachen und erhalten Sie Übersetzungen zurück, die dasselbe Glossar und dieselbe Markenstimme verwenden wie Ihre React-UI-Strings.

Benutzerkommentare, Beiträge und Suchergebnisse mit der PTC API übersetzen

Benutzerkommentare, Beiträge, Suchergebnisse und alle anderen nutzergenerierten Inhalte, die Ihre React-App verarbeitet, müssen übersetzt werden, sobald sie eintreffen. Die PTC REST API übersetzt diese Inhalte bei Bedarf mit Bearer-Token-Authentifizierung und verwendet dabei dasselbe Glossar und dieselbe Markenstimme wie Ihre en.json-Übersetzungen.

Übersetzen Sie jetzt Ihre en.json-Datei

Starten Sie Ihre kostenlose 30-Tage-Testphase - 20.000 Wörter in 2 Sprachen, ohne Kreditkarte. Zwei Wege:

  • Manuell: Laden Sie src/i18n/locales/en.json auf der JSON-Übersetzungsseite hoch.
  • CI-gesteuert: Verbinden Sie Ihr Git-Repository über die PTC API, und Übersetzungen erfolgen bei jedem Push automatisch.

In beiden Fällen installieren Sie die Browser-Erweiterung und lassen die visuelle KI-Prüfung Ihre laufende React-App in jeder Sprache überprüfen, bevor Sie sie ausliefern.