
Der vollständige Leitfaden zur React-Internationalisierung
Von null bis mehrsprachig: Richten Sie i18n in Ihrer React-App ein und automatisieren Sie anschließend Übersetzungen mit KI.
Pakete installieren
Sie benötigen drei Pakete: react-i18next (die React-Bindings), i18next (die Kernbibliothek) und optional i18next-browser-languagedetector zur automatischen Erkennung der Locale.
npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backendi18n-Instanz konfigurieren
Erstellen Sie eine i18n-Konfigurationsdatei, die i18next mit Ihrer Standardsprache, den Übersetzungsressourcen und der Plug-in-Kette initialisiert. Diese Datei muss am Einstiegspunkt Ihrer App importiert werden, bevor eine Komponente gerendert wird.
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next) // Must come before .init()
.init({
fallbackLng: 'en',
debug: process.env.NODE_ENV === 'development',
interpolation: {
escapeValue: false, // React already escapes
},
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
});
export default i18n;App mit I18nextProvider umschließen
Importieren Sie Ihre i18n-Konfigurationsdatei im Stammverzeichnis der App und umschließen Sie Ihren Komponentenbaum mit I18nextProvider. Andernfalls gibt useTranslation() anstelle übersetzter Texte die unverarbeiteten Schlüssel zurück.
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n'; // Import your config
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Suspense fallback={<div>Loading...</div>}>
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>
</Suspense>
</React.StrictMode>
);Übersetzungsdateien erstellen
Erstellen Sie für jede Sprache eine JSON-Datei. Gliedern Sie Zeichenfolgen mit verschachtelten Schlüsseln nach Funktion oder Seite. Verwenden Sie Ihre Ausgangssprache, üblicherweise Englisch, als einzige maßgebliche Quelle.
// public/locales/en/translation.json
{
"nav": {
"home": "Home",
"about": "About",
"settings": "Settings"
},
"greeting": "Hello, {{name}}!",
"cart": {
"itemCount_one": "{{count}} item",
"itemCount_other": "{{count}} items"
}
}
// public/locales/de/translation.json
{
"nav": {
"home": "Startseite",
"about": "Über uns",
"settings": "Einstellungen"
},
"greeting": "Hallo, {{name}}!",
"cart": {
"itemCount_one": "{{count}} Artikel",
"itemCount_other": "{{count}} Artikel"
}
}Übersetzungen in Komponenten verwenden
Rufen Sie useTranslation() in einer beliebigen Komponente auf, um die Funktion t() zu erhalten. Verwenden Sie sie für einfache Zeichenfolgen, interpolierte Variablen und mit der Trans-Komponente in JSX eingebettete Übersetzungen.
import { useTranslation } from 'react-i18next';
function Greeting({ userName }: { userName: string }) {
const { t } = useTranslation();
return (
<div>
<h1>{t('greeting', { name: userName })}</h1>
<nav>
<a href="/">{t('nav.home')}</a>
<a href="/about">{t('nav.about')}</a>
</nav>
</div>
);
}import { Trans, useTranslation } from 'react-i18next';
// For JSX inside translations:
// "terms": "By signing up, you agree to our <link>Terms</link>."
function SignUp() {
const { t } = useTranslation();
return (
<Trans i18nKey="terms" components={{
link: <a href="/terms" className="underline" />
}} />
);
}Pluralformen und Variablen verarbeiten
i18next verarbeitet Pluralformen anhand der CLDR-Regeln – nicht nur Singular und Plural. Arabisch hat sechs Formen (zero, one, two, few, many, other), Japanisch eine (other). Definieren Sie alle erforderlichen Formen in Ihren Übersetzungsdateien; i18next wählt automatisch die richtige aus.
// English: 2 forms (one, other)
{
"itemCount_one": "{{count}} item",
"itemCount_other": "{{count}} items"
}
// Arabic: 6 forms (zero, one, two, few, many, other)
{
"itemCount_zero": "لا عناصر",
"itemCount_one": "عنصر واحد",
"itemCount_two": "عنصران",
"itemCount_few": "{{count}} عناصر",
"itemCount_many": "{{count}} عنصرًا",
"itemCount_other": "{{count}} عنصر"
}
// Japanese: 1 form (other)
{
"itemCount_other": "{{count}}個のアイテム"
}Sprachwechsel und -erkennung hinzufügen
Erstellen Sie eine Sprachauswahl, die i18n.changeLanguage() aufruft. Kombinieren Sie sie mit der Spracherkennung des Browsers, um beim ersten Besuch automatisch die bevorzugte Sprache zu erkennen, und speichern Sie anschließend die ausdrückliche Auswahl.
import { useTranslation } from 'react-i18next';
const LANGUAGES = [
{ code: 'en', label: 'English' },
{ code: 'de', label: 'Deutsch' },
{ code: 'ja', label: '日本語' },
{ code: 'es', label: 'Español' },
];
function LanguageSwitcher() {
const { i18n } = useTranslation();
return (
<select
value={i18n.language}
onChange={(e) => i18n.changeLanguage(e.target.value)}
>
{LANGUAGES.map(({ code, label }) => (
<option key={code} value={code}>{label}</option>
))}
</select>
);
}Übersetzungen automatisieren
Wenn Ihre i18n-Einrichtung abgeschlossen ist, übersetzen Sie Ihre Locale-Dateien mit KI. Bitten Sie Ihren KI-Assistenten in Ihrer IDE, Ihre Ausgangsdatei zu übersetzen, oder verwenden Sie die CLI von i18n Agent in Ihrer CI/CD-Pipeline.
# In your IDE, ask your AI assistant:
> Translate public/locales/en/translation.json to German, Japanese, and Spanish
✓ de/translation.json created (1.2s)
✓ ja/translation.json created (1.5s)
✓ es/translation.json created (1.1s)
# Or use the CLI in CI/CD:
npx i18n-agent translate public/locales/en/translation.json --lang de,ja,esÜbersetzungsqualität automatisieren
Häufige Fallstricke
Übersetzungen zeigen unverarbeitete Schlüssel
Suspense-Fehler ohne Fallback
Abweichung bei der SSR-Hydration
Keine Autovervollständigung für Übersetzungsschlüssel
Empfohlene Dateistruktur
my-react-app/
├── public/
│ └── locales/
│ ├── en/
│ │ ├── translation.json # Default namespace
│ │ ├── common.json # Shared strings
│ │ └── dashboard.json # Feature namespace
│ ├── de/
│ │ ├── translation.json
│ │ ├── common.json
│ │ └── dashboard.json
│ └── ja/
│ └── ...
├── src/
│ ├── i18n.ts # i18n configuration
│ ├── main.tsx # App entry with Provider
│ ├── App.tsx
│ └── components/
│ └── LanguageSwitcher.tsx
└── package.jsoni18n Agent jetzt testen
Legen Sie Ihre Übersetzungsdatei hier ab
JSON, YAML, PO, XML, CSV, Markdown, Properties
oder zum Auswählen klicken
Zielsprachen