Next.js + PolyLingo

Fügen Sie Mehrsprachigkeit zu Ihrer Next.js-App hinzu.

Übersetzen Sie Ihre Locale-Dateien, Markdown-Inhalte und HTML-Seiten über einen einzigen API-Aufruf. Funktioniert mit dem App Router, next-intl und jeder i18n-Routing-Konfiguration.

App Router
Next.js 13–15 unterstützt
next-intl
native Integration
10 Sprachen
ein Skriptlauf
~3s
typische Laufzeit des Übersetzungsskripts

Next.js bietet Routing. Übersetzungen nicht.

Der Next.js App Router bietet exzellente integrierte Unterstützung für lokalisierungsbasiertes Routing. Bibliotheken wie next-intl machen das Verwalten von Übersetzungsdateien und das Umschalten der Locale einfach. Was sie nicht lösen, ist die Übersetzung selbst – jemand muss die übersetzten Inhalte in jeder Sprache erstellen, und das ist meistens Sie. Für die meisten Teams besteht der Workflow darin, die englische JSON in DeepL zu kopieren, das durch die Formatierung beschädigte Format zu korrigieren, das Ergebnis zurückzukopieren und das für jede Sprache zu wiederholen. Das ist langsam, fehleranfällig und skaliert nicht.

Der häufigste Workflow besteht darin, alle UI-Strings im Quellcode auf Englisch zu schreiben und dann die messages.json-Datei für jede Zielsprache zu übersetzen. Theoretisch ist das einfach. In der Praxis wird es jedoch zu einem wiederkehrenden Problem, 10+ Locale-Dateien mit Quellcodeänderungen synchron zu halten. Jedes Mal, wenn sich der englische Text ändert, müssen alle Locale-Dateien aktualisiert werden. Bei Verwendung standardmäßiger Übersetzungs-APIs werden Schlüsselnamen beschädigt, Platzhalter für Variablen übersetzt und die JSON-Struktur driftet zwischen den Locales – was zu subtilen Laufzeitfehlern führt, die schwer zu finden sind.

PolyLingo fügt sich in Ihr bestehendes Next.js i18n-Setup ein.

Wenn Sie next-intl oder eine andere i18n-Bibliothek verwenden, liegen Ihre Nachrichten bereits als JSON vor. PolyLingo nimmt dieses JSON, sendet es durch das Übersetzungsmodell und liefert übersetzte Kopien für jede Zielsprache zurück – mit unveränderten Schlüsseln, intakter Verschachtelung und korrekt übersetzten Zeichenkettenwerten. Sie können es von einem Build-Skript, einem Webhook oder der PolyLingo-Benutzeroberfläche aufrufen. Das Ergebnis wird direkt in Ihr Nachrichtenverzeichnis abgelegt.

Der Workflow: Schreiben Sie Ihre englische messages.json. Führen Sie ein einzelnes Skript aus, das die PolyLingo-API mit Ihrer Quelldatei und allen Zielsprachcodes aufruft. Erhalten Sie eine übersetzte JSON-Datei pro Sprache mit identischer Struktur. Schreiben Sie jede in Ihr messages/-Verzeichnis. Committen. Fertig.

Für inhaltsreiche Seiten mit Markdown im CMS (Sanity, Contentful) gilt derselbe Ansatz für Inhalte: Exportieren Sie als Markdown oder HTML, übersetzen Sie, schreiben Sie zurück ins CMS über dessen API. Die gesamte Pipeline kann als Build-Schritt oder per Webhook ausgelöst werden.

PolyLingo Übersetzungsskript – dieses Repository liefert translate-messages.mjs
// This repository: frontend/scripts/translate-messages.mjs
// Chunks large namespaces (e.g. home) so the model stays within output limits.
//
//   export POLYLINGO_API_KEY=pl_xxx
//   npm run i18n:polylingo
//
// Writes messages/es.json, fr.json, … from messages/en.json via POST /v1/translate
// with format: "json". See MARKETING_I18N.md for options and CI notes.
//
// Minimal one-shot pattern (fine for small message files):
//
// const source = readFileSync('./messages/en.json', 'utf8')
// const { translations } = await fetch(apiUrl + '/translate', {
//   method: 'POST',
//   headers: { Authorization: `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
//   body: JSON.stringify({
//     content: source, format: 'json', source: 'en',
//     targets: ['es', 'fr', 'de'], model: 'standard',
//   }),
// }).then((r) => r.json())
//
// for (const [lang, raw] of Object.entries(translations)) {
//   const obj = typeof raw === 'string' ? JSON.parse(raw) : raw
//   writeFileSync(`./messages/${lang}.json`, JSON.stringify(obj, null, 2))
// }
i18n.ts – next-intl v4 Konfiguration
// i18n.ts (next-intl v4)
import { getRequestConfig } from 'next-intl/server'

export const locales = [
  'en', 'ar', 'bn', 'cs', 'da', 'de', 'el', 'es', 'fa', 'fi',
  'fr', 'he', 'hi', 'id', 'it', 'ja', 'ko', 'ms', 'nl', 'no',
  'pl', 'pt', 'ru', 'sv', 'sw', 'th', 'tr', 'uk', 'vi', 'zh',
] as const
export type Locale = (typeof locales)[number]

export default getRequestConfig(async ({ requestLocale }) => {
  const locale = await requestLocale
  return {
    locale,
    messages: (await import(`./messages/${locale}.json`)).default,
  }
})
package.json – fügen Sie Übersetzung zu Ihrer Build-Pipeline hinzu
// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "i18n:polylingo": "node scripts/translate-messages.mjs",
    "translate:build": "npm run i18n:polylingo && next build"
  }
}

Warum PolyLingo zum Next.js i18n-Workflow passt

  • Übersetzen Sie messages/*.json-Dateien direkt – Schlüssel bleiben immer erhalten
  • Übersetzen Sie Markdown-Inhalte für Blogbeiträge und Dokumentationsseiten
  • Funktioniert mit next-intl, next-i18next und benutzerdefinierten Setups
  • REST-API integriert sich in Build-Skripte und CMS-Webhooks
  • Alle 36 Sprachen in einer einzigen Anfrage
  • Kostenloses Kontingent – 100.000 Tokens pro Monat
  • Dieses Repository verwendet den Workflow selbst: npm run i18n:polylingo generiert Marketing-Locale-Dateien aus messages/en.json (siehe MARKETING_I18N.md).
  • Funktioniert mit App Router und Pages Router
  • Ausgabedateien sind bereit zum Commit – keine Neuformatierung nötig

Richten Sie Mehrsprachigkeit in Ihrer Next.js-App ein

1

Richten Sie next-intl mit Ihrer englischen Nachrichten-Datei ein

Installieren Sie next-intl und konfigurieren Sie Ihre i18n.ts und Middleware. Schreiben Sie alle UI-Strings in messages/en.json. Strukturieren Sie die Datei, wie Ihre App es benötigt – flach oder verschachtelt. Dies wird Ihre einzige Quelle der Wahrheit.

2

Führen Sie das Übersetzungsskript aus

Verwenden Sie die PolyLingo JSON-API aus einem kleinen Node-Skript (siehe Code oben). In diesem Monorepo führen Sie npm run i18n:polylingo aus dem frontend/-Verzeichnis mit gesetztem POLYLINGO_API_KEY aus – es teilt große Namespaces für Zuverlässigkeit auf. Typische Läufe dauern deutlich unter einer Minute für ein komplettes Marketing-Bundle.

3

Committen Sie die Locale-Dateien und deployen Sie

Die generierten Locale-Dateien sind gültiges JSON mit identischer Struktur wie Ihre Quelle. Committen Sie sie in Ihr Repository. Fügen Sie das Übersetzungsskript Ihrer CI-Pipeline hinzu, um Locales bei jeder Inhaltsänderung synchron zu halten.

Next.js Mehrsprachigkeits-Anwendungsfälle

🚀

SaaS-Apps und Dashboards

Übersetzen Sie Ihre gesamte UI-String-Bibliothek in einem Skriptlauf. Unterstützt alle next-intl-Formatierungsfunktionen – Daten, Zahlen, Plurale – da die JSON-Struktur exakt erhalten bleibt.

📰

Content-Seiten und Blogs

Für inhaltsreiche Next.js-Seiten mit Sanity oder Contentful verwenden Sie PolyLingo, um Seiteninhalte sowie UI-Strings zu übersetzen – gleiche API, gleiche Format-Erhaltungs-Garantien.

🛒

E-Commerce mit regionalen Varianten

Übersetzen Sie Produktnamen, Beschreibungen, Kategorieseiten und Checkout-UI. Verwenden Sie das Advanced-Modell für Marketingtexte, bei denen die Markenstimme wichtig ist, Standard für funktionale UI-Strings.

Häufig gestellte Fragen

Funktioniert das mit dem Next.js App Router?

Ja. Die PolyLingo-Integration ist nur ein Skript, das JSON-Dateien liest und schreibt – es hat keine Abhängigkeit von Next.js-internen Komponenten. Es funktioniert mit App Router, Pages Router oder jedem Framework. Das gezeigte next-intl-Konfigurationsbeispiel verwendet die v4-API mit requestLocale, die mit Next.js 13, 14 und 15 kompatibel ist.

Was, wenn sich meine messages.json häufig ändert?

Das empfohlene Muster ist, das Übersetzungsskript in Ihre CI/CD-Pipeline einzubinden, ausgelöst bei Änderungen an messages/en.json. So bleiben alle Locale-Dateien automatisch synchron. Für Teams mit häufigen Textänderungen verhindert dies vollständig Locale-Drift.

Funktioniert PolyLingo sowohl mit next-i18next als auch mit next-intl?

Ja. next-i18next verwendet dieselbe Locale-JSON-Struktur. Das Übersetzungsskript funktioniert identisch – zeigen Sie es auf Ihr public/locales/en/-Verzeichnis und schreiben Sie die Ausgaben in die anderen Locale-Verzeichnisse. Die JSON-Format-Kompatibilität ist gleich.

Wie sieht es mit dynamischen Inhalten aus, die nicht in der messages-Datei sind?

Dynamische Inhalte – Blogbeiträge, Produktbeschreibungen, nutzergenerierte Inhalte – sollten auf der Datenebene übersetzt werden, entweder in Ihrem CMS oder über ein Build-Skript, das die Inhalte vor Erreichen von Next.js verarbeitet. PolyLingo verarbeitet Markdown, HTML und Klartext gleichermaßen gut für diesen Zweck.

Kann ich nur die Strings übersetzen, die sich seit dem letzten Lauf geändert haben?

Inkrementelle Übersetzung (nur geänderte Schlüssel übersetzen) ist in Planung. Derzeit übersetzt das Skript die gesamte Datei neu. Für die meisten Nachrichten-Dateien (unter 20 KB) ist das schnell genug, um bei jedem Commit ausgeführt zu werden. Für sehr große Dateien wird empfohlen, nach Namespace zu splitten.

Gibt es eine Möglichkeit, Übersetzungen vor der Produktion zu überprüfen?

Das empfohlene Muster ist, übersetzte Locale-Dateien in einem separaten Branch oder PR zur Überprüfung zu committen, bevor sie in main gemerged werden. Dies ist Standardpraxis für Teams, die eine menschliche Überprüfung der Übersetzungsqualität benötigen. PolyLingo erzeugt einen guten ersten Entwurf – für die meisten UI-Strings erfordert die Standard-Modell-Ausgabe keine Bearbeitung.

Lassen Sie Ihre erste Locale-Datei in unter 5 Minuten übersetzen.

Kostenloser API-Schlüssel. Keine Kreditkarte. Fügen Sie Ihr Nachrichten-JSON ein und sehen Sie sofort das Ergebnis.

Holen Sie sich Ihren API-Schlüssel

Das Übersetzungsskript ist in 5 Minuten eingerichtet. Kostenloses Kontingent – keine Kreditkarte erforderlich.

Fügen Sie Mehrsprachigkeit zu Ihrer Next.js-App hinzu — PolyLingo | PolyLingo