How do I translate my React website?

Use an i18n library like react-i18next (replace text with t() keys and maintain a file per language), or add a translation script such as ConveyThis to index.html to translate the rendered app without code changes.

What is the best translation library for React?

react-i18next is the most widely used option and works with hooks via useTranslation. Other libraries exist, but the concepts (keys, locale files, interpolation, plurals) are the same.

Does ConveyThis work with React Router and dynamic content?

Yes. The script tracks client-side route changes and watches for newly rendered content, so new views and updated text are translated.

Is Google Translate a good way to translate a React site?

Browser translation helps individual visitors but creates no indexable pages and gives you no control over quality. Google's own website widget has been limited to non-commercial use since 2020.

How do I keep some React components untranslated?

With ConveyThis, add className="conveythis-no-translate" to the element. With react-i18next, don't pass that text through t().

So übersetzen Sie eine React-Website (i18next oder No-Code)

Fassen Sie diesen Beitrag zusammen mit: 7 Minuten Lesezeit

Sie können eine React-Website auf zwei Arten übersetzen. Die Coderoute ist eine i18n-Bibliothek wie react-i18next: Sie ersetzen fest codierten Text durch Schlüssel, rufen t('key') durch die useTranslation Hook und pflegen Sie eine Übersetzungsdatei pro Sprache. Die No-Code-Route ist eine Website-Übersetzungsschicht: Sie fügen Ihrer HTML-Eintragsdatei ein Skript hinzu, das die gerenderte App übersetzt, einschließlich der Ansichten, die nach der clientseitigen Navigation angezeigt werden. react-i18next eignet sich für Teams, in denen Entwickler den Text besitzen und ihn in der Codebasis haben möchten. Eine Übersetzungsebene ist schneller, wenn Sie die gesamte Site in vielen Sprachen benötigen, einschließlich Inhalten aus einem CMS oder einer API.

Wichtige Erkenntnisse

react-i18next (basierend auf i18next) ist das gebräuchlichste React i18n-Setup: npm install react-i18next i18next, initialisieren mit initReactI18next, dann verwenden const { t } = useTranslation().
Eine i18n-Bibliothek übersetzt Ihre Zeichenfolgen. Sie benötigen weiterhin Übersetzer, Sprach-URLs, hreflang und einen Plan für CMS- oder API-Inhalte.
ConveyThis benötigt keine Codeänderungen: Fügen Sie den Codeausschnitt ein in index.html, wählen Sie Sprachen aus und bearbeiten Sie Übersetzungen in einem visuellen Editor. Es folgt der Navigation des React Routers und übersetzt neu gerenderte Inhalte.
Nur clientseitiges Rendering schränkt mehrsprachige SEO mit jeder Methode ein. Verwenden Sie Server-Rendering (z. B. Next.js) oder Prerendering, wenn der Suchverkehr in anderen Sprachen wichtig ist.

Option 1: Übersetzen Sie eine React-App mit react-i18next

Die react-i18next – Anleitung zum Einstieg Zeigt das minimale Setup.

1. Installieren

npm install react-i18next i18next --save

2. Konfigurieren Sie i18next

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: { translation: { welcome: 'Welcome back, {{name}}', cart: 'Cart' } },
  de: { translation: { welcome: 'Willkommen zurück, {{name}}', cart: 'Warenkorb' } },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // active language
  fallbackLng: 'en', // used when a key is missing
  interpolation: { escapeValue: false }, // React already escapes output
});

export default i18n;

3. Importieren Sie es einmal am Einstiegspunkt

// src/main.jsx
import './i18n';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

4. Verwenden Sie den Haken in Komponenten

import { useTranslation } from 'react-i18next';

export function Header({ user }) {
  const { t, i18n } = useTranslation();
  return (
    <header>
      <p>{t('welcome', { name: user.firstName })}</p>
      <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
    </header>
  );
}

Wie es in der Anleitung heißt: “Sie erhalten die t-Funktion, indem Sie den useTranslation-Hook verwenden.” Teilen Sie bei größeren Apps Übersetzungen in Namespaces auf und laden Sie sie bei Bedarf (z. B. mit einem Backend-Plugin), anstatt jede Sprache zu bündeln.

Was eine i18n-Bibliothek Ihnen hinterlässt

Jemand muss jeden Schlüssel in jeder Sprache schreiben und ihn aktualisieren, wenn sich die englische Kopie ändert. Fehlende Schlüssel fallen leise auf die Standardsprache zurück.
Produktbeschreibungen, Blogbeiträge und CMS-Inhalte sind nicht in Ihrem Code enthalten, daher benötigen sie einen eigenen Lokalisierungsprozess.
Sie erstellen die Sprach-URLs. Geben Sie die Sprache in die Route ein (/de/pricing) mit React Router oder dem Routing Ihres Frameworks und halten Sie es synchron mit i18n.language. Google empfiehlt separate URLs pro Sprache, anstatt per Cookie oder Browsereinstellung zu wechseln (Google Search Central).
Sie kümmern sich auch um hreflang und <html lang>. Jede Sprachversion muss sich selbst und alle anderen auflisten, sonst ignoriert Google die Tags (Google Search Central). Aktualisieren document.documentElement.lang zum Sprachwandel.
Preise und Termine erforderlich Intl.NumberFormat „ Intl.DateTimeFormat (oder die Formatierung von i18next).

Best Practices für React i18n

Verwenden Sie beschreibende Schlüssel (checkout.pay) anstelle vollständiger englischer Sätze als Schlüssel.
Erstellen Sie niemals Sätze durch Verketten übersetzter Fragmente. Verwenden Sie Interpolation, damit Übersetzer Wörter neu anordnen können.
Verwenden Sie die Pluralbehandlung von i18next; Viele Sprachen haben mehr als zwei Pluralformen.
Fügen Sie keinen Text in Bilder oder SVGs ein, die Sie nicht übersetzen können.
Entwerfen Sie für längere Zeichenfolgen und testen Sie Layouts von rechts nach links frühzeitig, wenn Sie Arabisch oder Hebräisch benötigen.
Fügen Sie eine CI-Prüfung hinzu, die fehlschlägt, wenn ein Schlüssel auf Englisch, aber nicht an anderen Orten vorhanden ist.

Option 2: Übersetzen Sie eine React-Site ohne Code mit ConveyThis

Wenn Sie nicht jede Komponente umgestalten möchten oder ein Großteil Ihrer Inhalte von einem CMS oder einer API stammt, ConveyThis kann die React-App beim Rendern übersetzen.

Die Einrichtung erfolgt in fünf Schritten:

Erstellen Sie ein ConveyThis-Konto und fügen Sie Ihre Domain hinzu.
Wählen Sie die Ausgangssprache und die Zielsprachen aus (210 werden unterstützt) und speichern Sie dann.
Kopieren Sie den JavaScript-Ausschnitt aus Ihrem Dashboard. Die Anleitung zur React-Installation geht durch jeden Bildschirm.
Fügen Sie es vor dem Schließen in Ihre HTML-Eintragsdatei ein </head> oder </body> Schlagwort: public/index.html in React App-Projekten erstellen, oder index.html an der Projektwurzel in Vite-Projekten.
Einsetzen. Es erscheint ein Sprachumschalter und die Site wird automatisch übersetzt.

In einer einseitigen App überwacht das Skript die Seite auf nach dem Laden hinzugefügte oder geänderte Inhalte und folgt clientseitigen Routenänderungen (Verlaufs-API-Navigation und Hash-Änderungen). Wenn React Router eine neue Ansicht rendert oder Statusaktualisierungen neuen Text hinzufügen, übersetzt ConveyThis ihn. Ihre Komponenten müssen nichts aufrufen.

Sie behalten die Kontrolle über die Ausgabe:

Bearbeiten Sie jeden Satz im Kontext mit dem visuellen Editor.
Legen Sie Glossarregeln für Produktnamen und feste Begriffe fest (bezahlte Pläne) und verwenden Sie genehmigte Übersetzungen mit dem Übersetzungsspeicher wieder.
Elemente ausschließen mit der conveythis-no-translate Klasse, zum Beispiel Benutzernamen, Codebeispiele oder Preise, die Sie selbst formatieren (So schließen Sie Segmente aus).
Laden Sie Gutachter für jede Sprache mit Teamrollen ein.

In JSX sieht der Ausschluss folgendermaßen aus:

<span className="conveythis-no-translate">{user.displayName}</span>

SEO für React-Sites

Eine vom Client gerenderte React-App sendet eine fast leere HTML-Shell und erstellt die Seite im Browser. Welche Übersetzungsmethode Sie auch verwenden, das ist das Haupthindernis für mehrsprachige SEO.

Wenn organischer Datenverkehr in anderen Sprachen wichtig ist, rendern Sie Inhalte auf dem Server oder zur Build-Zeit (Next.js oder ein Prerendering-Schritt).
Geben Sie jeder Sprache eine eigene URL. ConveyThis unterstützt Unterordner, Subdomains oder a ?lang Parameter, fügt automatisch hreflang-Tags hinzu und übersetzt Titel, Metabeschreibungen und JSON-LD. Sehen mehrsprachige SEO.
Überprüfen Sie mit der URL-Inspektion der Search Console, was Google sieht, anhand einer übersetzten URL.

react-i18next vs. eine Translationsschicht

	react-i18next	ConveyThis
Codeänderungen	Jede Zeichenfolge ersetzt durch `t()` Schlüssel	Ein Skript-Tag
Wer übersetzt	Ihr Team oder Ihre Übersetzer in JSON-Dateien	Erster Entwurf der maschinellen Übersetzung, visuell bearbeitet
CMS-/API-Inhalte	Separater Prozess	Übersetzt mit der Seite
Neue Inhalte	Fügen Sie Schlüssel zu jedem Gebietsschema hinzu	Automatisch erkannt und übersetzt
URLs und hreflang	Du baust sie	Eingebaut
Am besten für	App-Benutzeroberfläche im Besitz von Entwicklern	Inhaltsintensive Websites, Marketingseiten, viele Sprachen

Viele Teams verwenden beides: react-i18next für die Benutzeroberfläche des angemeldeten Produkts und eine Übersetzungsebene für die Marketingseite, Dokumente und CMS-Inhalte.

Hintergrundinformationen zu den Konzepten finden Sie in unserem Leitfaden zur Internationalisierung (i18n). Wenn Sie auch in Vue arbeiten, lesen Sie So übersetzen Sie eine Vue.js-Website. Wenn Ihre App Angular ist, gibt es eine separate Angular Integration.

Häufig gestellte Fragen

Wie übersetze ich meine React-Website?

Verwenden Sie eine i18n-Bibliothek wie react-i18next (ersetzen Sie Text durch t() Schlüssel und pflegen Sie eine Datei pro Sprache) oder fügen Sie ein Übersetzungsskript wie ConveyThis hinzu index.html um die gerenderte App ohne Codeänderungen zu übersetzen.

Was ist die beste Übersetzungsbibliothek für React?

react-i18next ist die am weitesten verbreitete Option und funktioniert mit Hooks über useTranslation. Es gibt andere Bibliotheken, aber die Konzepte (Schlüssel, Gebietsschemadateien, Interpolation, Pluralformen) sind dieselben.

Funktioniert ConveyThis mit React Router und dynamischen Inhalten?

Ja. Das Skript verfolgt clientseitige Routenänderungen und achtet auf neu gerenderte Inhalte, sodass neue Ansichten und aktualisierter Text übersetzt werden.

Ist Google Translate eine gute Möglichkeit, eine React-Site zu übersetzen?

Die Browserübersetzung hilft einzelnen Besuchern, erstellt jedoch keine indexierbaren Seiten und gibt Ihnen keine Kontrolle über die Qualität. Googles eigenes Website-Widget ist seit 2020 auf die nichtkommerzielle Nutzung beschränkt.

Wie halte ich einige React-Komponenten unübersetzt?

Mit ConveyThis hinzufügen className="conveythis-no-translate" zum Element. Mit react-i18next geben Sie diesen Text nicht weiter t().

Um es in Ihrer React-App auszuprobieren, Erstellen Sie ein ConveyThis-Konto und fügen Sie den Codeausschnitt in Ihre index.html.