Übersetzen Sie React-Apps mit KI in menschlicher Qualität

i18n React-Beispiel: Demo eines übersetzbaren React-Projekts

Keine Sorge, wenn Ihr React-Projekt noch nicht für die Lokalisierung eingerichtet ist. In diesem Abschnitt führen wir Sie durch eine Demo-App und Beispiel-Commit-Referenzen.

Dieser Leitfaden geht davon aus, dass Sie bereits eine laufende React + TypeScript-App (Vite, CRA, Next oder ähnliches) und mindestens einige Benutzeroberflächen- (UI-)Strings in Englisch haben. Wir werden Internationalisierungs- (i18n-)Unterstützung hinzufügen, Übersetzungsdateien organisieren und PTC verwenden, um Übersetzungen schnell und einfach zu generieren.

Um Ihre App für die Lokalisierung vorzubereiten, müssen Sie Text aus Komponenten in Übersetzungsdateien verschieben. Dies ermöglicht es, später andere Sprachen hinzuzufügen, ohne Ihren Code zu ändern.

Die häufigste Methode, dies in React zu tun, ist die Verwendung von i18next und seinem React-Integrationspaket react-i18next.

1. Installieren Sie die Bibliotheken:

npm install i18next react-i18next

npm install i18next react-i18next

2. Erstellen Sie einen Ordner für Übersetzungsdateien:

src/i18n/
└── locales/
 └── en.json

src/i18n/
└── locales/
    └── en.json

Hier werden alle Übersetzungen gespeichert. Jede Datei innerhalb von src/i18n/locales/ repräsentiert eine einzelne Sprache. Vorerst benötigen Sie nur en.json für Englisch. Später generiert PTC zusätzliche Dateien wie fr.json (Französisch) oder de.json (Deutsch) und legt sie in denselben Ordner, sodass alles an einem Ort organisiert bleibt.

3. Fügen Sie die Strings Ihrer Ausgangssprache (Englisch) zu en.json hinzu:

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

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

4. Ersetzen Sie den fest codierten Text in App.tsx durch Übersetzungsschlüssel, die auf die JSON-Datei verweisen:

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>
  );
}

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>
  );
}

Wenn Sie sich fragen, woher die t-Funktion kommt, werden wir sie im nächsten Schritt bei der Konfiguration von i18n einrichten. Vorerst ist der wichtige Teil, dass Ihre Komponente nicht mehr auf fest codierten englischen Text angewiesen ist.

Im vorherigen Schritt haben Sie en.json erstellt und Ihre Komponente aktualisiert, um auf Übersetzungsschlüssel zu verweisen. Im Moment weiß i18n jedoch nicht, wo es nach diesen JSON-Dateien suchen soll. Wir müssen es konfigurieren, damit die t()-Funktion tatsächlich die richtigen Strings abrufen kann.

Anstatt jede Sprachdatei manuell zu importieren, können Sie Vite’s import.meta.glob verwenden, um jede *.json-Datei innerhalb von src/i18n/locales/ automatisch zu laden. Das bedeutet, wenn Sie später Dateien wie fr.json oder de.json (von PTC) hinzufügen, werden diese ohne zusätzlichen Aufwand erkannt.

1. Erstellen Sie src/i18n/index.ts und konfigurieren Sie i18next so, dass Ihre JSON-Dateien automatisch geladen werden:

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

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

const resources: Record<string, { translation: any }> = {};
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;

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

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

const resources: Record<string, { translation: any }> = {};
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;

2. Importieren Sie diese Konfiguration einmal in Ihrer Einstiegsdatei (src/main.tsx), damit i18next bereit ist, bevor die App gerendert wird:

import './i18n';

import './i18n';

Damit weiß Ihre React-App, wo Übersetzungsdateien zu finden sind. Wenn PTC später neue Dateien wie fr.json generiert, müssen Sie Ihren Code nicht ändern oder Importe hinzufügen. Sie müssen lediglich sicherstellen, dass die übersetzte Datei in src/i18n/locales/ gelangt. Wenn Sie die App das nächste Mal ausführen, macht i18n Französisch automatisch neben Englisch verfügbar.

Nachdem Ihre App nun Nachrichten aus src/i18n/locales/en.json liest, können Sie PTC verwenden, um die Übersetzungen in andere Sprachen zu generieren.

1. Sobald Sie sich für eine kostenlose Testversion registriert oder sich in Ihr PTC-Konto eingeloggt haben, öffnen Sie den Einrichtungs-Assistent und fügen Sie Ihre englische Quelldatei als übersetzbare Ressource hinzu:

src/i18n/locales/en.json

src/i18n/locales/en.json

Legen Sie dann den Ausgabepfad fest, damit PTC weiß, wo die übersetzten Dateien abgelegt werden sollen:

src/i18n/locales/{{lang}}.json

src/i18n/locales/{{lang}}.json

Dieses Muster erstellt eine Datei pro Sprache (zum Beispiel fr.json und de.json) im selben Ordner wie en.json.

PTC benötigt einige Minuten, um die KI-Übersetzungen zu generieren. Wenn sie fertig sind, erhalten Sie eine JSON-Datei pro Sprache. Jede Datei sollte in Ihrem Projekt unter dem src/i18n/locales/-Ordner abgelegt werden.

Wenn Sie beispielsweise ins Französische übersetzt haben, wird die Datei sein:

src/i18n/locales/fr.json

src/i18n/locales/fr.json

Beispiel des Inhalts in src/i18n/locales/fr.json:

Wie Sie die Dateien erhalten, hängt davon ab, wie Sie PTC nutzen. In dieser Demo haben wir die Git-Integration gewählt, was bedeutet, dass PTC einen Merge-Request mit den übersetzten Dateien geöffnet hat, die bereits im richtigen Ordner platziert waren.

Nachdem Ihre Übersetzungen vorhanden sind, ist der letzte Schritt, App.tsx zu aktualisieren und einen einfachen Sprachumschalter hinzuzufügen. Dies ermöglicht Ihnen, in Ihrer React-App zwischen Sprachen zu wechseln und zu bestätigen, dass alles korrekt funktioniert.

import { useTranslation } from 'react-i18next';

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

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

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

import { useTranslation } from 'react-i18next';

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

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

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

Sie können jetzt zwischen Englisch und Französisch wechseln. Wenn Sie die App auf Französisch ausführen, sollte das Layout genau wie im Englischen aussehen – nur die Sprache des Textes ändert sich.

React app in English

React app in French

Sobald Ihre React-App lokalisiert ist und in mehreren Sprachen funktioniert, können Sie einige erweiterte Optionen in i18next freischalten, um die Leistung und Benutzererfahrung zu verbessern:

• Sprache des Benutzers automatisch erkennen

Standardmäßig startet die App in Englisch und ermöglicht es Benutzern, Sprachen manuell mit einem Sprachumschalter zu wechseln. Um sie automatisch in der bevorzugten Sprache des Benutzers zu öffnen, installieren Sie das Sprachdetektor-Plugin:

npm install i18next-browser-languagedetector

npm install i18next-browser-languagedetector

Aktualisieren Sie dann Ihre src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(LanguageDetector) // Browser/localStorage/etc. erkennen
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr', 'de', 'ar'], // an Ihre unterstützten Sprachen anpassen
 interpolation: { escapeValue: false },
 detection: {
 order: ['querystring', 'localStorage', 'cookie', 'navigator'],
 caches: ['localStorage', 'cookie'],
 },
 react: {
 useSuspense: true, // auf false setzen, wenn Sie <App /> nicht in <Suspense> einschließen
 },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)       // detect browser/localStorage/etc.
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
    react: {
      useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
    },
  });

export default i18n;

Mit dieser Einrichtung überprüft i18n beim ersten Laden die Sprache des Browsers (und gespeicherte Präferenzen) und wechselt automatisch zur bevorzugten Sprache des Benutzers, wenn verfügbar.

• Übersetzungen verzögert laden für kleinere Bundles

In Schritt 2 dieses Leitfadens haben Sie import.meta.glob mit { eager: true } konfiguriert, was alle Übersetzungsdateien in den anfänglichen App-Ladevorgang bündelt. Dies ist einfach, aber wenn Sie viele Sprachen unterstützen, kann dies Ihre Bundle-Größe erhöhen.

Zur Optimierung können Sie Übersetzungen mit i18next-http-backend verzögert laden:

npm install i18next-http-backend

npm install i18next-http-backend

Aktualisieren Sie src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(Backend) // JSON über HTTP laden
 .use(LanguageDetector) // automatisch erkennen + Cache
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr'],
 interpolation: { escapeValue: false },
 backend: {
 // Vite stellt Dateien aus /public im Stammverzeichnis der Website bereit
 loadPath: '/locales/{{lng}}/{{ns}}.json',
 },
 react: { useSuspense: true },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)                // load JSON over HTTP
  .use(LanguageDetector)       // auto-detect + cache
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: {
      // Vite serves files from /public at the site root
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    react: { useSuspense: true },
  });

export default i18n;

So sollten Ihre Dateien organisiert sein:

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

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

Mit dieser Einrichtung werden Übersetzungsdateien nur dann vom Server geladen, wenn eine Sprache benötigt wird. Dies hält das anfängliche Bundle kleiner, insbesondere wenn Ihre App viele Sprachen unterstützt.

Wenn Sie diesen beiden Optimierungstipps folgen, kann Ihre React-App:

• Automatisch in der bevorzugten Sprache des Benutzers starten
• Übersetzungen nur bei Bedarf laden, wobei Ihre Bundles schlank bleiben