React- oder Next.js-Website internationalisieren (next-intl) | We.Inc
Übersetze eine React- oder Next.js-Website richtig: Message-Dateien, Locale-Routing mit next-intl, Intl-Formatierung für Datumsangaben, Geldbeträge und Pluralformen, Rechts-nach-links-Layouts und hreflang-Tags.
Halte jeden Text in einer JSON-Message-Datei pro Sprache, gib jeder Sprache eine eigene URL wie /de/about und formatiere Datumsangaben, Preise und Pluralformen mit den eingebauten Intl-APIs des Browsers. Im Next.js App Router verbindet next-intl diese Teile: ein [locale]-Routensegment, ein Proxy, der die Sprache auswählt, und useTranslations in Komponenten.
Die Bestandteile einer übersetzten Website
Bestandteil
Was du verwendest
Texte
messages/en.json, messages/de.json und so weiter
URLs
Ein Pfadpräfix pro Sprache: /en/..., /de/...
Spracherkennung
createMiddleware von next-intl in proxy.ts (vor Next.js 16 middleware.ts)
Datum, Zahlen, Geld
Intl.DateTimeFormat und Intl.NumberFormat
Pluralformen
ICU-Message-Syntax oder Intl.PluralRules
Suchmaschinen
hreflang-Links für jede Sprachversion, dazu x-default
Übersetzen ist mehr als Wörter austauschen. Die Wortstellung ändert sich, Pluralregeln unterscheiden sich, Arabisch liest sich von rechts nach links, und jedes Land schreibt Datumsangaben auf seine Weise. Probier unten den Umschalter aus, um eine kleine Produktkarte die Sprache wechseln zu sehen, und bau dann dasselbe in deiner App mit den Setup-Dateien und dem hreflang-Generator.
Wähle in der Demo eine Sprache. Die Karte tauscht ihre Texte, formatiert Preis und Datum für dieses Locale und dreht bei Arabisch die Schreibrichtung um.
Ändere die Artikelanzahl, um zu sehen, wie jede Sprache ihre eigene Pluralform wählt.
Kopiere die next-intl-Setup-Dateien in ein Next.js-Projekt mit App Router.
Gib deine Domain und Sprachen in den hreflang-Generator ein und füge die Tags oder das Metadata-Objekt in dein Layout ein.
Bau Sätze nie aus zusammengesetzten Fragmenten. Übersetze ganze Sätze mit Platzhaltern wie {count}, denn die Wortstellung variiert.
Lass in deinem Layout Platz, denn eine übersetzte Beschriftung ist oft deutlich länger als die englische.
Setze lang auf dem html-Element für jede Sprache und dir="rtl" für Sprachen, die von rechts nach links laufen.
Verzichte auf Flaggen in Sprachauswahlen. Flaggen stehen für Länder, und viele Sprachen werden in mehreren gesprochen.
Lass Menschen die Sprache manuell wechseln und merk dir ihre Wahl, statt dich nur auf Browsereinstellungen zu verlassen.
Häufige Fragen
Welche i18n-Bibliothek sollte ich mit React verwenden?
Für den Next.js App Router ist next-intl genau dafür gebaut und unterstützt Server Components. Für eine reine React-App ohne Next.js wählst du eine Bibliothek, die Texte als JSON speichert, damit ein späterer Wechsel zu einer anderen überschaubar bleibt.
Sollten Sprachen in Unterordnern, Subdomains oder eigenen Domains liegen?
Unterordner wie example.com/de/ sind am einfachsten zu betreiben, weil eine Website und eine Domain alles tragen. next-intl unterstützt auch domainbasiertes Routing, falls du de.example.com oder eine Länderdomain brauchst.
Wie füge ich hreflang in Next.js hinzu?
Gib alternates.languages aus metadata oder generateMetadata zurück, mit einem Eintrag pro Sprach-URL. Next.js gibt für jeden einen link rel="alternate" hreflang-Tag aus. Jede Sprachversion muss alle anderen und sich selbst auflisten, sonst ignorieren Suchmaschinen die Gruppe womöglich.
Kann ich meine Website maschinell übersetzen?
Du kannst maschinelle Übersetzung als ersten Entwurf nutzen, solltest sie aber von einer Person prüfen lassen, die die Sprache fließend spricht, besonders Überschriften, Preise und Rechtstexte. Dünne oder ungeprüfte Übersetzungen können Leser verwirren und Vertrauen schwächen.
Messages statt Texte in Komponenten
Jeder Text, den eine Person sieht, sollte aus einer Message-Datei kommen, mit einem Schlüssel nach Bedeutung wie Cart.checkoutButton. Entwickler bearbeiten Englisch, Übersetzer bearbeiten die anderen Dateien, und niemand muss Komponenten nach fest eingebauten Texten durchsuchen.
Namespaces pro Komponente halten die Dateien übersichtlich. useTranslations('Cart') von next-intl gibt dir dann t('checkoutButton') nur innerhalb dieser Komponente.
Überlass Intl die Formatierung
Intl.NumberFormat schreibt 1234.5 Euro für deutsche Leser als 1.234,50 €, mit Symbol und Trennzeichen genau dort, wo dieses Locale sie erwartet. Intl.DateTimeFormat macht dasselbe für Datumsangaben, und Intl.PluralRules sagt dir, ob eine Zahl in einer bestimmten Sprache die Form one, few, many oder other annimmt.
Diese APIs sind in jedem modernen Browser und in Node enthalten. Formatierung macht dein Bundle also nicht schwerer und bleibt auch für Sprachen korrekt, die du nie gelernt hast.
Sprachen von rechts nach links
Arabisch, Hebräisch, Persisch und Urdu werden von rechts nach links gelesen. dir="rtl" auf dem html-Element spiegelt die Textausrichtung und die Reihenfolge von Inline-Inhalten, feste left- und right-Werte im CSS bleiben aber, wo sie sind.
Nutze logische Eigenschaften wie margin-inline-start und padding-inline-end oder die Utilities ms- und pe- von Tailwind, damit Abstände automatisch mit der Richtung wechseln.
next-intl-Setup für den App Router
Installiere mit npm install next-intl. Diese Dateien folgen der Struktur aus der offiziellen Einstiegsanleitung von next-intl für Locale-basiertes Routing.
Eine Datei pro Sprache, mit denselben Schlüsseln in jeder. Die ICU-Syntax regelt Pluralformen innerhalb der Message.
src/i18n/routing.ts und src/proxy.ts
Im Routing listest du deine Locales einmal auf. Der Proxy (vor Next.js 16 middleware.ts genannt) leitet Besucher auf ein Sprachpräfix um.
src/i18n/request.ts
Liest das Locale aus dem [locale]-Segment, weist unbekannte ab und lädt die Texte dieser Sprache.
next.config.ts, Layout und eine Seite
Das Plugin bindet request.ts ein. Verschiebe deine Seiten unter app/[locale]/ und lies Texte mit useTranslations. next/root-params ist ab Next.js 16.3 standardmäßig aktiv, frühere Versionen brauchen experimental.rootParams.
Formatieren ohne Bibliothek
Intl in reinem JavaScript
Funktioniert in jeder React-App, ob übersetzt oder nicht.
hreflang-Regeln, die Suchmaschinen prüfen
Sprachauszeichnungen richtig setzen
Regel
Beispiel
Vollständige absolute URLs verwenden
Jede Version listet sich selbst und alle anderen
Die deutsche Seite verlinkt auf en, de, ar und x-default
Sprache nach ISO 639-1, optionale Region nach ISO 3166-1 alpha-2
de, en-GB, pt-BR
Nie nur eine Region
be ist Belarussisch, nicht Belgien; nutze nl-BE oder fr-BE
x-default für alle anderen
Verweist auf eine Sprachauswahl oder deine Hauptversion
Probier es aus: eine Karte in fünf Sprachen
Wechsle die Sprache und ändere die Artikelanzahl. Die Texte stammen aus einem Message-Objekt, Preis, Datum und Pluralform aus den Intl-APIs des Browsers.
Sprache
Artikel im Warenkorb: {n}
Gewählte Pluralkategorie:
Richtung:
Die Demo rechnet keine Währung um, sie formatiert nur dieselbe Zahl.
hreflang-Generator
Gib deine Domain, einen Seitenpfad und deine Sprachcodes ein, um die Link-Tags für den head oder das alternates-Objekt für Next.js zu erhalten.
Domain
Seitenpfad
Sprachcodes (durch Komma getrennt)
x-default-Sprache
Ungültige Codes übersprungen: {codes}. Nutze eine Form wie de oder en-GB.