React-Lokalisierung: ein umfassender i18n-Leitfaden

Beginnen Sie mit einer einzigen verlässlichen Quelle für unterstützte Sprachen. Speichern Sie Sprachcode, Anzeigename, Textrichtung und Fallback-Beziehung gemeinsam. Routenanalyse, Sprachauswahl, Intl-Formatierer und Katalogladen sollten alle diese Konfiguration verwenden. So verhindern Sie, dass eine Komponente fr-CA akzeptiert, während eine andere nach abweichenden Regeln unbemerkt auf fr oder Englisch zurückfällt.

Nachrichten sollten vollständige Gedanken ausdrücken. Verwenden Sie stabile semantische Schlüssel wie checkout.payment.failed statt Schlüssel, die aus dem aktuellen englischen Satz übernommen wurden. Übergeben Sie Variablen als benannte Werte, setzen Sie Markup-Platzhalter bewusst ein und lassen Sie die Nachrichtensyntax Pluralformen oder grammatische Alternativen auswählen. So bleibt der Kontext für Übersetzer erhalten und andere Sprachen können die Wortreihenfolge ändern, ohne den React-Code anzupassen.

• ✓ Locale: die validierte sprachliche oder regionale Präferenz, die für einen Rendervorgang aktiv ist.
• ✓ Nachrichtenkatalog: stabile Nachrichtenbezeichner, die übersetzten Werten zugeordnet sind.
• ✓ Interpolation: Laufzeitwerte, die in eine vollständige übersetzte Nachricht eingesetzt werden.
• ✓ Plural- und Auswahlregeln: grammatische Varianten, die anhand sprachspezifischer Daten ausgewählt werden.
• ✓ Fallback: das bewusst festgelegte Verhalten, wenn eine Sprache oder Nachricht nicht verfügbar ist.

Diese Einrichtung verwendet react-i18next, da sein schlüsselbasiertes JSON-Modell vielen React-Teams vertraut ist. Dieselbe Abfolge gilt für andere Bibliotheken: Kataloge definieren, eine sprachspezifische Instanz initialisieren, sie an der Anwendungsgrenze bereitstellen, vollständige Nachrichten in Komponenten übersetzen und beim Sprachwechsel sowohl die sichtbare Oberfläche als auch die URL oder gespeicherte Präferenz der Anwendung aktualisieren.

1. Schritt 1

   Kataloge strukturieren

   Erstellen Sie einen Quellkatalog und passende Sprachdateien. Gruppieren Sie Schlüssel nach stabilen Produktbereichen wie Navigation, Checkout und Validierung. Halten Sie die Schlüsselsätze aller Sprachen synchron und ergänzen Sie für mehrdeutige Nachrichten Übersetzerkontext.

2. Schritt 2

   Die i18n-Instanz initialisieren

   Erstellen Sie die i18next-Instanz in einem eigenen Modul, registrieren Sie nur die von der Anwendung benötigten Plugins, definieren Sie unterstützte Sprachen und Fallbacks und trennen Sie Entwicklungsdiagnosen vom Produktionsverhalten.

3. Schritt 3

   Lokalisierung am Anwendungsstamm bereitstellen

   Stellen Sie die initialisierte Instanz am Anwendungsstamm bereit. Folgen Sie in Frameworks mit Server-Rendering der Framework-Integration, damit aktive Sprache und Ressourcen zwischen Serverausgabe und Hydration übereinstimmen.

4. Schritt 4

   Vollständige Komponentennachrichten übersetzen

   Rufen Sie useTranslation für den relevanten Namespace auf und übergeben Sie Interpolationswerte als benannte Daten. Verwenden Sie Trans nur, wenn eine zusammenhängende Nachricht React-Elemente enthält, nicht um beliebige Fragmente zusammenzusetzen.

5. Schritt 5

   Eine barrierefreie Sprachauswahl erstellen

   Ändern Sie die aktive Sprache der Bibliothek und navigieren Sie zur passenden sprachspezifischen URL, wenn die Routen lokalisiert sind. Speichern Sie eine Präferenz nur als Komfortfunktion; sie darf nicht die einzige verlässliche Quelle für öffentliche Seiten sein.

{
  "navigation": {
    "home": "Home"
  },
  "cart": {
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

import {useTranslation} from 'react-i18next';

export function CartSummary({count}: {count: number}) {
  const {t, i18n} = useTranslation('common');

  return (
    <section>
      <h2>{t('cart.title')}</h2>
      <p>{t('cart.items', {count})}</p>
      <button onClick={() => i18n.changeLanguage('fr')}>
        {t('language.french')}
      </button>
    </section>
  );
}

Initialisieren Sie i18next vor dem ersten für Nutzer sichtbaren Rendern. Zeigen Sie in einer rein clientseitigen Anwendung einen bewusst gestalteten Ladezustand, während der aktive Katalog eintrifft, statt roher Schlüssel. Erstellen oder beziehen Sie bei SSR eine sicher an die Anfrage gebundene Instanz, laden Sie die ermittelte Sprache, rendern Sie damit und serialisieren Sie nur die Ressourcen, die der Client benötigt, um denselben Baum zu hydrieren.

Eine Sprachauswahl sollte lesbare Sprachnamen anzeigen, die aktuelle Auswahl kennzeichnen und die entsprechende Route des Nutzers beibehalten. Für öffentliche lokalisierte Seiten sind Links vorzuziehen, da jede Sprache eine echte URL besitzt. Ein Auswahlfeld oder Menü kann die Interaktion verbessern, doch Tastaturzugriff, Fokusverhalten und ein Navigationsweg ohne JavaScript müssen erhalten bleiben.

Ein Katalog für jede Sprache kann zu den größten Anwendungsressourcen gehören, wenn er vorzeitig importiert wird. Teilen Sie Kataloge zuerst nach Sprache und bei ausreichend großen Produkten zusätzlich nach Route oder Namespace auf. Laden Sie den aktiven Katalog vor dem Rendern kritischer Oberflächen, cachen Sie unveränderliche versionierte Ressourcen und vermeiden Sie eine zweite Anfrage für Nachrichten, die der Server bereits zum Erzeugen der Seite verwendet hat.

Bevorzugen Sie für öffentliche Inhalte ein React-Framework, das lokalisiertes HTML durch statische Generierung oder Server-Rendering ausgeben kann. Die Hydration sollte dieselbe Sprache und dieselben Nachrichten beibehalten, die die Serverausgabe erzeugt haben. Erkennt der Client die Sprache erneut und unabhängig, kann dies zu flackernden Inhalten und Hydration-Abweichungen führen. Übergeben Sie die ermittelte Sprache über die Rendering-Grenze, statt zweimal zu raten.

Mehrsprachige SEO hängt von auffindbaren Alternativen ab. Veröffentlichen Sie pro Sprache eine stabile URL, lokalisieren Sie Titel und Beschreibung, geben Sie eine selbstreferenzierende kanonische URL aus und verbinden Sie gleichwertige Seiten mit wechselseitigen hreflang-Werten. Suchmaschinen-Crawler senden möglicherweise keinen brauchbaren Accept-Language-Header. Machen Sie die Browsererkennung daher nie zum einzigen Weg zu Übersetzungen. Eine sichtbare, verlinkte Sprachauswahl hilft Nutzern und Crawlern gleichermaßen.

• ✓ Laden Sie nur die aktive Sprache und die von der Route benötigten Namespaces.
• ✓ Rendern Sie die ausgewählte Sprache für öffentliche Seiten auf dem Server oder zur Build-Zeit.
• ✓ Laden Sie kritische Nachrichten vorab, damit Schlüssel oder die Fallback-Sprache nicht kurzzeitig sichtbar werden.
• ✓ Geben Sie jeder lokalisierten Seite eine eindeutige URL, eine kanonische URL und wechselseitige hreflang-Links.
• ✓ Behalten Sie gewöhnliche Links für die Sprachauswahl bei und bewahren Sie die entsprechende Route.

Die React-Bibliothek übernimmt Laufzeitaufgaben: Nachrichten auswählen, Werte interpolieren und Komponenten aktualisieren. Eine Lokalisierungsplattform verwaltet den Workflow rund um diese Nachrichten: Schlüsselgleichheit sicherstellen, Prüfer einladen, in großem Umfang übersetzen, Änderungen aufzeichnen und freigegebene Kataloge in die Anwendung übertragen. Die Trennung dieser Verantwortlichkeiten schützt die Komponentenebene vor Anbieterbindung.

Translatable arbeitet mit JSON-Katalogen und entwicklerorientierten Workflows. Importieren Sie vorhandene Sprachdateien, verwalten Sie Werte in einer fokussierten Oberfläche, nutzen Sie KI-Unterstützung für Entwürfe oder Massenübersetzungen, synchronisieren Sie Änderungen über Git-Anbieter und stellen Sie Katalogaktualisierungen optional über ein CDN bereit. React bleibt über die bereits vom Team gewählte i18n-Bibliothek angebunden.

Führen Sie Workflow-Automatisierung schrittweise ein. Ein kleines Team kann mit versionskontrollierten Exporten beginnen und jede Änderung in einem Pull Request prüfen. Steigt die Veröffentlichungsfrequenz, können Sie automatische Synchronisierung oder CDN-Bereitstellung ergänzen und dabei Validierung sowie einen gebündelten Fallback beibehalten. Das Ergebnis sind schnellere Textänderungen, ohne das Rendering der Anwendung von einem möglicherweise nicht verfügbaren Drittanbieter abhängig zu machen.