Wie Sie eine React-App lokalisieren: Schritt-für-Schritt Guide (2026)

Schnelle Antwort

Um eine React-App zu lokalisieren:

1. react-i18next installieren: npm install react-i18next i18next
2. Übersetzungs-JSON-Dateien für jede Sprache erstellen
3. i18next mit Ihren Übersetzungen konfigurieren
4. Den useTranslation Hook in Komponenten verwenden
5. Einen Sprachwechsler hinzufügen

Voraussetzungen

• React 16.8+ (für Hooks)
• Node.js 14+
• Grundlegende React-Kenntnisse

Schritt 1: Abhängigkeiten installieren

TerminalCopy
npm install react-i18next i18next i18next-browser-languagedetector

Schritt 2: Übersetzungsdateien erstellen

Erstellen Sie einen locales Ordner mit JSON-Dateien für jede Sprache:

src/
  locales/
    en/
      translation.json
    de/
      translation.json
    fr/
      translation.json

src/locales/en/translation.json:

JSONCopy
1{
2  "welcome": {
3    "title": "Welcome to Our App",
4    "subtitle": "The best solution for your needs"
5  },
6  "nav": {
7    "home": "Home",
8    "about": "About",
9    "contact": "Contact"
10  },
11  "auth": {
12    "login": "Log In",
13    "signup": "Sign Up",
14    "logout": "Log Out"
15  }
16}

src/locales/de/translation.json:

JSONCopy
1{
2  "welcome": {
3    "title": "Willkommen in unserer App",
4    "subtitle": "Die beste Lösung für Ihre Bedürfnisse"
5  },
6  "nav": {
7    "home": "Startseite",
8    "about": "Über uns",
9    "contact": "Kontakt"
10  },
11  "auth": {
12    "login": "Anmelden",
13    "signup": "Registrieren",
14    "logout": "Abmelden"
15  }
16}

Schritt 3: i18next konfigurieren

Erstellen Sie src/i18n.js:

JavaScriptCopy
1import i18n from 'i18next';
2import { initReactI18next } from 'react-i18next';
3import LanguageDetector from 'i18next-browser-languagedetector';
4
5import enTranslation from './locales/en/translation.json';
6import deTranslation from './locales/de/translation.json';
7
8i18n
9  .use(LanguageDetector)
10  .use(initReactI18next)
11  .init({
12    resources: {
13      en: { translation: enTranslation },
14      de: { translation: deTranslation },
15    },
16    fallbackLng: 'en',
17    interpolation: {
18      escapeValue: false, // React escaped bereits
19    },
20  });
21
22export default i18n;

Schritt 4: Im App-Einstiegspunkt importieren

src/index.js:

JavaScriptCopy
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import './i18n'; // i18n-Konfiguration importieren
4import App from './App';
5
6const root = ReactDOM.createRoot(document.getElementById('root'));
7root.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>
11);

Schritt 5: Übersetzungen in Komponenten verwenden

src/App.js:

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function App() {
4  const { t } = useTranslation();
5
6  return (
7    <div>
8      <nav>
9        <a href="/">{t('nav.home')}</a>
10        <a href="/about">{t('nav.about')}</a>
11        <a href="/contact">{t('nav.contact')}</a>
12      </nav>
13
14      <main>
15        <h1>{t('welcome.title')}</h1>
16        <p>{t('welcome.subtitle')}</p>
17      </main>
18
19      <button>{t('auth.login')}</button>
20    </div>
21  );
22}
23
24export default App;

Schritt 6: Sprachwechsler hinzufügen

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function LanguageSwitcher() {
4  const { i18n } = useTranslation();
5
6  const changeLanguage = (lng) => {
7    i18n.changeLanguage(lng);
8  };
9
10  return (
11    <div>
12      <button onClick={() => changeLanguage('en')}>English</button>
13      <button onClick={() => changeLanguage('de')}>Deutsch</button>
14      <button onClick={() => changeLanguage('fr')}>Français</button>
15    </div>
16  );
17}
18
19export default LanguageSwitcher;

Erweiterte Features

Variablen/Interpolation

Übersetzung:

JSONCopy
{
  "greeting": "Hallo, {{name}}!"
}

Komponente:

JSXCopy
t('greeting', { name: 'Max' }) // "Hallo, Max!"

Pluralisierung

Übersetzung:

JSONCopy
1{
2  "items": "{{count}} Artikel",
3  "items_plural": "{{count}} Artikel"
4}

Komponente:

JSXCopy
t('items', { count: 1 }) // "1 Artikel"
t('items', { count: 5 }) // "5 Artikel"

Trans-Komponente (JSX in Übersetzungen)

Übersetzung:

JSONCopy
{
  "terms": "Ich stimme den <link>Nutzungsbedingungen</link> zu"
}

Komponente:

JSXCopy
1import { Trans } from 'react-i18next';
2
3<Trans i18nKey="terms" components={{ link: <a href="/terms" /> }}>
4  Ich stimme den <a href="/terms">Nutzungsbedingungen</a> zu
5</Trans>

Übersetzungen skaliert verwalten

Wenn Ihre App wächst, wird das Verwalten von JSON-Dateien schwierig:

• Mehrere Entwickler bearbeiten dieselben Dateien
• Kein Translation Memory
• Schwer fehlende Übersetzungen zu tracken
• Manueller Export/Import mit Übersetzern

Lösung: Ein Übersetzungsmanagementsystem nutzen

IntlPull automatisiert React-Lokalisierung:

TerminalCopy
1# Neueste Übersetzungen holen
2npx @intlpullhq/cli download --output ./src/locales
3
4# Neue Strings pushen
5npx @intlpullhq/cli upload
6
7# Übersetzungsstatus prüfen
8npx @intlpullhq/cli status

Vorteile:

• KI-gestützte Übersetzung
• Zusammenarbeit mit Übersetzern
• Translation Memory
• Automatischer Sync mit Ihrem Repo

Häufige Probleme und Lösungen

Problem: Übersetzungen aktualisieren nicht

Lösung: Stellen Sie sicher dass Sie i18n vor App importiert haben:

JavaScriptCopy
import './i18n';
import App from './App';

Problem: Leerer Content beim ersten Laden

Lösung: Suspense-Fallback hinzufügen:

JSXCopy
1import { Suspense } from 'react';
2
3<Suspense fallback="Lädt...">
4  <App />
5</Suspense>

Best Practices

1. Namespaces nutzen für große Apps zur Organisation von Übersetzungen
2. Keys semantisch halten (z.B. auth.login nicht button1)
3. Keine Strings konkatenieren - Interpolation verwenden
4. Mit Pseudo-Lokalisierung testen vor echten Übersetzungen
5. Ein TMS nutzen wie IntlPull für Zusammenarbeit

Zusammenfassung

Um eine React-App zu lokalisieren:

1. react-i18next und i18next installieren
2. Übersetzungs-JSON-Dateien erstellen
3. i18next konfigurieren
4. useTranslation Hook verwenden
5. Sprachwechsler hinzufügen
6. Ein TMS für Skalierung nutzen

Bereit Ihre Lokalisierung zu skalieren? IntlPull automatisiert React i18n mit KI-Übersetzung und nahtloser CLI-Integration.