PTC
Registrieren Upgrade auf Pro Ihr Konto

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

Richten Sie react-i18next ein, übersetzen Sie die en.json mit KI in über 40 Sprachen und lassen Sie die Browser-Erweiterung von PTC (Private Translation Cloud) die laufende React-App bei jedem Release prüfen. Dieser Leitfaden deckt die Internationalisierung von React vollständig ab: Einrichtung von react-i18next, Umgang mit Pluralen und dynamischen Inhalten, Übersetzung Ihrer en.json in über 40 Sprachen mit PTC und Sprachwechsel zur Laufzeit. Am Ende verfügen Sie über ein funktionierendes Setup für die React-Lokalisierung, das bereit für den Versand 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, Anzahlen, Daten) pro Locale korrekt interpoliert werden.
  • Plurale den Regeln der jeweiligen Zielsprache folgen.
  • die übersetzten .json-Dateien von PTC erstellt und nicht manuell geschrieben werden.

Schritt 1: Erstellen einer React + TypeScript-App mit Vite

Dieser Leitfaden verwendet eine mit Vite erstellte React + TypeScript-App. Wenn Sie react-i18next zu einer bestehenden App hinzufügen, fahren Sie mit Schritt 2 fort.

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 Standardseite von Vite + React in Ihrem Browser.

Schritt 2: react-i18next installieren und hartcodierte 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 hartcodierten 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 hartcodierten 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 Folgendes zurück:

  • t() – sucht einen String anhand des Keys.
  • i18n – ermöglicht den programmgesteuerten Sprachwechsel.

Schritt 3: Automatisches Laden jeder Locale-JSON mit import.meta.glob

Erstellen Sie src/i18n/index.ts, um i18next zu konfigurieren und Übersetzungsdateien automatisch zu laden. Das Muster import.meta.glob sorgt dafür, dass jede .json-Datei, die Sie zu src/i18n/locales/ hinzufügen, automatisch erkannt wird. Keine manuellen Importe beim Hinzufügen neuer Sprachen:

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() die Übersetzungs-Keys anstelle des übersetzten Textes zurück.

Variablen mit {{variableName}} interpolieren

Verwenden Sie die Syntax {{variableName}} in Ihrer JSON und übergeben Sie den Wert an t(). Aktualisieren Sie die 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 für t() ist ein Objekt mit den Werten, die Sie ersetzen möchten. Sie können so viele Variablen wie nötig verwenden.

Pluralisierung mit den Key-Suffixen _one / _other

Verwenden Sie das Suffix-Muster _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 automatisch die richtige Pluralform aus. Es verarbeitet auch Sprachen mit mehr als zwei Pluralformen (Polnisch, Arabisch, Russisch) ohne zusätzliche Konfiguration.

Für Übersetzungen, die HTML-Elemente wie Links oder fettgedruckten Text enthalten, verwenden Sie 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 auf Kindelemente verweisen (zählend 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>

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

Daten, Zahlen und Währungen mit Intl formatieren

Verwenden Sie Intl-Formatierer, anstatt Format-Strings 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 nun die en.json und müssen es.json, fr.json, de.json usw. erstellen. PTC ist genau dafür konzipiert.

  1. Starten Sie ein PTC-Projekt und wählen Sie Englisch als Ausgangssprache. Die kostenlose Testphase deckt 20.000 Wörter in 2 Sprachen ab, keine Kreditkarte erforderlich.
  2. Laden Sie die en.json hoch. PTC analysiert die verschachtelte Struktur, erkennt i18next-Platzhalter ({{name}}, {{count}}) und identifiziert die Plural-Suffixe (_one, _other).
  3. Fügen Sie eine kurze Beschreibung Ihrer React-App und ihrer Zielgruppe hinzu. PTC nutzt diesen Kontext, um Tonalität und Terminologie in jeder Sprache abzustimmen.
  4. Wählen Sie die Zielsprachen aus und bestätigen Sie. PTC erstellt pro Zielsprache eine übersetzte .json, die strukturell identisch mit der Quelldatei ist. Gleiche Keys, gleiche Verschachtelung, gleiche Platzhalter. Übersetzte Werte.
  5. Fügen Sie die Dateien in src/i18n/locales/ ein. Dank des in Schritt 3 eingerichteten automatischen Ladens per import.meta.glob 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 der en.json lösen eine automatische Übersetzung aus. PTC öffnet einen Pull Request mit den aktualisierten Dateien der Zielsprachen.

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

Fügen Sie Sprach-Buttons hinzu, um zu prü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 Re-Rendering jeder Komponente aus, die useTranslation() verwendet, sodass die gesamte UI sofort aktualisiert wird. Kein Neuladen der Seite erforderlich.

Automatische Erkennung der Benutzersprache mit i18next-browser-languagedetector

Installieren Sie i18next-browser-languagedetector, um automatisch die richtige Sprache aus den Browsereinstellungen des Benutzers, der URL oder gespeicherten Präferenzen 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 per Lazy-Loading mit i18next-http-backend laden

Standardmäßig werden alle Übersetzungsdateien zum Zeitpunkt des Builds gebündelt. Für Apps mit vielen Sprachen verwenden Sie 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 bereitgestellt werden:

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

Der Wechsel zu Französisch ruft nun /locales/fr/translation.json bei Bedarf ab, anstatt sie fest einzubinden. Das initiale Bundle bleibt schlank, unabhängig davon, wie viele Sprachen Sie unterstützen.

Visuelle Übersetzungsprüfung Ihrer laufenden React-App – Versand 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 könnte in Deutsch über einen Button hinauslaufen (Überlauf). „Save“ könnte im Französischen als Substantiv übersetzt werden, obwohl die UI ein Verb benötigt. Ein hartcodierter englischer String außerhalb von t() wird unabhängig von der Anzahl der unterstützten Sprachen unübersetzt gerendert.

Die AI Visual QA von PTC ersetzt den manuellen QA-Durchgang. Für browserbasierte Apps wie React ist die Browser-Erweiterung die richtige Wahl. Installieren Sie diese einmalig und zeichnen Sie einen kurzen Rundgang durch die kritischen Benutzerflüsse Ihrer React-App auf (Anmeldung, Hauptfunktion, Einstellungen). Von da an spielt PTC die Aufzeichnung nach jedem Übersetzungs-Update in jeder Zielsprache ab, erfasst jeden Bildschirm und prüft das gerenderte Ergebnis:

  • Korrekturen in den Übersetzungsdateien, sofern PTC diese kontrolliert. PTC korrigiert eine falsche Wortart, wählt ein kürzeres Synonym, das auf einen Button passt, oder generiert eine Pluralform neu.
  • Cursor / Claude Code Prompts, wenn das Problem im Code Ihrer Komponente liegt. Ein hartcodierter englischer String außerhalb von t(), ein Satz, der durch String-Verkettung statt durch t('key', { var }) erstellt wurde, oder eine fehlende Trans-Komponente für Rich-Text-Übersetzungen.

Das Ergebnis: Prüfung als CI-Schritt. Jedes Release wird mit visueller Verifizierung in allen Zielsprachen ausgeliefert, ohne menschlichen Flaschenhals.

Übersetzen von Release Notes, Marketing-Seiten und Kunden-E-Mails

Ihre Release Notes, Marketing-Seiten, Landing-Pages und Kunden-E-Mails befinden sich außerhalb der en.json. Die Funktion Einfügen zum Übersetzen von PTC verarbeitet diese Texte im selben Projekt. Fügen Sie den Ausgangstext im PTC-Dashboard ein, wählen Sie die Zielsprachen aus und erhalten Sie Übersetzungen zurück, die dasselbe Glossar und dieselbe Markenstimme verwenden wie Ihre React-UI-Strings.

Übersetzen von Benutzerkommentaren, Posts und Suchergebnissen mit der PTC API

Benutzerkommentare, Posts, Suchergebnisse und alle anderen benutzergenerierten Inhalte, die Ihre React-App verarbeitet, müssen bei ihrem Eingang übersetzt werden. Die PTC REST API übersetzt diese Inhalte bei Bedarf mit Bearer-Token-Authentifizierung und nutzt 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, keine Kreditkarte erforderlich. Zwei Wege:

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

In jedem Fall: Installieren Sie die Browser-Erweiterung und lassen Sie die AI Visual QA Ihre laufende React-App in jeder Sprache verifizieren, bevor Sie diese veröffentlichen.