How do I translate dynamic content from a CMS, an API or users?

Das Plugin übersetzt nur Text, der in Ihrer Datei „ code “ geschrieben ist. Für „ content “, die Ihre Datei „ code “ niemals sieht, rufen Sie „tDynamic“, „tDynamicAll“ oder „tDynamicHtml“ aus „@weglot/translate-react/dynamic“ in Next.js-Serverkomponenten auf. Wenn die API länger als 500 ms benötigt oder ein Text zum ersten Mal angefordert wird, geben sie den Quelltext zurück. Bei einer späteren Anfrage ist die Übersetzung bereits verfügbar. Wenn Sie Daten selbst zwischenspeichern, richten Sie den Cache nach der Sprache des Besuchers aus.

Next.js or Vite: what changes?

Next.js verwendet „withWeglot“ von @weglot/translate-react/next und „WeglotProvider“ von @weglot/translate-react/react/next. Vite verwendet „weglotPlugin“ von @weglot/translate-react/vite und „WeglotProvider“ von @weglot/translate-react/react. Webpack verwendet „weglotPlugin“ von @weglot/translate-react/webpack. Die Funktionen des „ content “ laufen nur in Next.js-Serverkomponenten.

What happens when I build?

Das Plugin sucht den Text im JSX unter „sourceRoot“ und fragt die „ Weglot “-API nach den fehlenden Übersetzungen ab. „ Weglot “ generiert diese mithilfe eines LLM, und der Build wartet bis zum Ablauf von „translationTimeout“ (standardmäßig 300 Sekunden). Anschließend schreibt es den Text in den Ordner „public/translations/“ .json. Wenn die Übersetzung fehlschlägt, schlägt der Build fehl und speichert die empfangenen Daten im lokalen Cache: Führen Sie den Build erneut durch, um fortzufahren. Bei „buildMode: ‚cache-only‘“ führt der Build keine Netzwerkaufrufe durch.

Where are the translations stored?

In Ihrem „ Weglot “-Projekt, wo Sie diese überprüfen und bearbeiten können. Jeder Build speichert außerdem die erhaltenen Übersetzungen in /weglot/cache/ .json. Übertrage diesen Ordner in den Repository, um den Build durchzuführen, ohne die API aufzurufen, oder ignoriere ihn. Der Ordner „public/translations/“ wird automatisch generiert und in die Datei „.gitignore“ aufgenommen.

What gets translated, and how do I exclude something?

Text in JSX, String-Literale innerhalb von JSX-Ausdrücken, aus Konstanten gelesene Strings sowie Attribute wie „title“, „alt“, „placeholder“ und „aria-label“. „ Code “, URLs, Klassennamen und Strings außerhalb von JSX bleiben unverändert. Fügen Sie „translate=“no““ oder „data-weglot-skip“ hinzu, um ein Element in der Originalsprache beizubehalten. Definieren Sie Ihre eigenen Text-Props mit „translatableAttributes“.

@weglot/translate-react

Übersetzen Sie Ihre
Reagieren, Next.js oder Vite App

Q: Does it handle SEO: one URL per language and hreflang?

Heute noch nicht. Die Sprache des Besuchers wird in einem Cookie gespeichert, und jede Sprache wird unter denselben URLs bereitgestellt, sodass Suchmaschinen nur die Ausgangssprache indexieren. Sie können Seitentitel und Beschreibungen mit tDynamicAll in generateMetadata übersetzen. Wenn Sie bereits jetzt indexierte URLs pro Sprache benötigen, verwenden Sie eine Bibliothek mit Locale-Routing, wie beispielsweise next-intl oder Paraglide JS.

Q: Does it work with React Server Components?

Ja, mit dem Next.js App Router. Importieren Sie „WeglotProvider“ aus @weglot/translate-react/react/next, damit beim Wechseln der Sprache Ihre Serverkomponenten aktualisiert werden. „tDynamic“, „tDynamicAll“ und „tDynamicHtml“ werden serverseitig in Serverkomponenten ausgeführt.

Keine t()-Wrapper, keine JSON-Dateien. Fügen Sie ein Build-Plugin und einen API-Schlüssel von Weglot hinzu: Der Text in Ihrem JSX wird beim Erstellen Ihrer App übersetzt, und Ihr Team bearbeitet die Übersetzungen unter Weglot , ohne code zu verändern.

Holen Sie sich Ihren API-Schlüssel

Kopiere die Eingabeaufforderung für · · · Lies die Dokumentation · Auf npm anzeigen

Erfordert React 19 Next.js 15 / 16.0.4+ (App Router) oder Vite Node 20.9+

// how it works

Vier Schritte. Ihre Komponenten bleiben unverändert.

Die Ausgangs- und Zielsprachen stammen aus Ihrem Projekt „ Weglot “ und nicht aus Ihrem Projekt „ code “. Das Plugin liest den Text in Ihrem JSX zum Zeitpunkt der Kompilierung ein und ruft die entsprechenden Übersetzungen ab.

Installieren Sie das Paket und fügen Sie Ihren API-Schlüssel hinzu

Erstellen Sie ein „ Weglot 2.0“-Projekt und kopieren Sie anschließend den API-Schlüssel aus den Projekteinstellungen. Er beginnt mit pk_. Weiter .env außerhalb der Versionskontrolle.
Terminal · .env
```
$ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key
```

Das Plugin hinzufügen

Umschließe deine Next.js-Konfiguration mit withWeglot. Punkt sourceRoot in den Ordner, in dem sich Ihre Seiten und Komponenten befinden.

Hinzufügen weglotPlugin in Ihre Vite-Konfiguration. Bei Webpack importieren Sie sie aus @weglot/translate-react/webpack stattdessen.

next.config.ts

import type { NextConfig } from "next";
import { withWeglot } from "@weglot/translate-react/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withWeglot(nextConfig, { sourceRoot: "./app" });
}

vite.config.ts

import { defineConfig } from "vite";
import { weglotPlugin } from "@weglot/translate-react/vite";

export default defineConfig({
  plugins: [weglotPlugin({ sourceRoot: "src" })],
});

Anbieter hinzufügen

Umschließe dein Root-Layout mit WeglotProvider vom Next.js-Einstiegspunkt aus, sodass beim Wechseln der Sprache Ihre Serverkomponenten aktualisiert werden.

Verpacken Sie Ihre App mit WeglotProvider, so früh wie möglich.

app/layout.tsx

import { WeglotProvider } from "@weglot/translate-react/react/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WeglotProvider>{children}</WeglotProvider>
      </body>
    </html>
  );
}

src/main.tsx

import { WeglotProvider } from "@weglot/translate-react/react";

root.render(
  <WeglotProvider>
    <App />
  </WeglotProvider>,
);

Erstellen und veröffentlichen Sie in jeder Sprache Ihres Projekts

Bei jedem Build werden fehlende Übersetzungen von Weglot abgerufen und geschrieben public/translations/<locale>.json. Ignoriere diesen Ordner. Füge eine Datei „ Sprachwechsler “ mit folgendem Inhalt hinzu: LocaleSwitcher oder useWeglotContext.
.gitignore
```
public/translations/
```

// compare

Warum nicht eine klassische i18n-Bibliothek?

i18n-Bibliotheken verlangen, dass Sie jede Zeichenkette durch einen Schlüssel ersetzen und pro Sprache eine eigene Datei führen. „ Weglot “ liest die Zeichenketten, die Sie bereits geschrieben haben. Hier sehen Sie einen Vergleich der Optionen.

Basierend auf der öffentlichen Dokumentation der jeweiligen Projekte (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), November 2026.
Kriterien	Weglot `@weglot/translate-react`	next-intl / i18next	Paraglide JS	CMS-eigene Lokalisierung
Umschließe Zeichenfolgen mit t() oder Nachrichtenfunktionen	NeinText in JSX wird zur Kompilierungszeit erkannt.	Ja`t("key")` für jede Zeichenkette.	Ja`m.key()` Nachrichtenfunktionen.	Content nurStrings in Ihrem „ code “ benötigen weiterhin eine Bibliothek.
Übersetzungsdateien pro Sprache	Keine zu pflegenWird beim Build generiert, wird von Git ignoriert.	JaIn der Regel eine JSON-Datei pro Sprachversion.	JaEine Meldungsdatei pro Sprachversion.	Neinim CMS gespeichert.
Mehrsprachige Weiterleitung und SEO (URL pro Sprache, hreflang)	Noch nichtDie Sprache wird in einem Cookie gespeichert. Für alle Sprachen gelten dieselben URLs, die Ausgangssprache ist indexiert.	next-intl: jaIntegrierte Lokalisierungsweiterleitung. i18next: über die Konfiguration Ihres Frameworks.	JaIntegrierte lokalisierte URLs: Sprachpräfixe, übersetzte Pfade oder Domains. Fügen Sie hreflang-Tags selbst hinzu.	FrontendEin Headless-CMS speichert die „ content “ pro Sprachversion. URLs und „hreflang“-Attribute stammen aus Ihrem Frontend.
Für Sie generierte Übersetzungen	JaWeglot wird während des Builds mit einem LLM übersetzt.	NeinBringen Sie Ihre eigenen Übersetzungen oder ein TMS mit.	Mit Toolsinlang CLI-Maschinenübersetzung oder Ihrem „ coding “-Agenten.	Kostenpflichtiges Add-onKI-Übersetzung in kostenpflichtigen Tarifen: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Übersetzungen ohne Entwickler bearbeiten	JaÜberprüfen und bearbeiten Sie den Text unter Weglot dashboard .	NeinBearbeiten Sie JSON-Dateien oder fügen Sie ein separates TMS hinzu.	Mit Finkdem Web-Editor von Inlang und einem GitHub-Konto.	JaIm CMS-Editor.
Von einem „ coding “-Agenten in einem einzigen Befehl eingerichtet	JaEine Installation, zwei Konfigurationsänderungen. Kopierbarer Befehl unten.	Langwierige AufgabeDer Agent wandelt jede Zeichenkette in Schlüssel und Dateien um.	Zeitaufwändige Aufgabe`init` wird ohne Eingabeaufforderungen für Agenten ausgeführt, dann wird jede Zeichenfolge zu einem `m.key()` Nachricht.	k. A.Im CMS konfiguriert.

// built for coding agents

Entwickelt für KI- coding -Agenten

Wenn Sie mit Claude Code, Cursor oder Codex arbeiten, kann Ihr Agent „ Weglot “ automatisch hinzufügen. Es müssen keine Zeichenfolgen umgeschrieben werden, daher ist die Änderung geringfügig und leicht zu überprüfen.

01 · Einrichtung

Der Agent installiert und konfiguriert es

Eins npm install, ein Plugin, ein Anbieter, eine Zeile in .gitignore. Der Agent fragt nur nach dem API-Schlüssel.

02 · Dokumente

Dokumente, die LLMs lesen können

Die Dokumentation enthält eine llms.txt Index, und jede Seite verfügt über eine Markdown-Version: Hinzufügen .md an seine URL.

03 · Eingabeaufforderung

Eine Eingabeaufforderung, die zum Kopieren bereit ist

Jeder Schritt der Anleitung entspricht der Einführungsanleitung mit den tatsächlichen Importpfaden. Fügen Sie ihn unten ein.

In Claude einfügen Code

An der Cursorposition einfügen (Agent-Modus)

In den Codex einfügen

In Ihrer App ausführen

$ npm install @weglot/translate-react

// for your team

Bearbeiten und prüfen, ohne etwas zu verändern code

Jede Übersetzung erscheint in Ihrem „ Weglot “-Projekt. Die Mitarbeiter aus den Bereichen Produktentwicklung, Marketing und Übersetzung prüfen und bearbeiten die Formulierungen dort, ohne einen Pull-Request zu erstellen.

Überprüfen Sie die Übersetzungen, die Weglot für Ihre App generiert.
Sie können jede Übersetzung unter Weglot dashboardbearbeiten.
Ausschließen alles von code mit translate="no" oder data-weglot-skip.

// fit

Wann sollte man „ Weglot “ verwenden – und wann nicht?

Das Paket befindet sich in der Vorschauphase. Hier ist der aktuelle Stand.

Verwenden Sie @weglot/translate-react, wenn

Ihre App läuft mit React 19 auf Next.js (App Router) oder Vite.
Man möchte Strings nicht in t() einschließen oder für jede Sprache eine eigene Datei pflegen.
Ihr „ coding “-Agent verfasst den Großteil der Beiträge auf code, und Sie möchten, dass die Übersetzungen damit Schritt halten.
Personen, die nicht unter code registriert sind, müssen Übersetzungen überprüfen und bearbeiten.
Ihre UI-Texte befinden sich unter code; mit dem CMS content können Sie diese serverseitig übersetzen.

Verwende etwas anderes, wenn

Sie benötigen eine URL pro Sprache, und die übersetzten Seiten müssen bereits heute von Suchmaschinen indexiert werden. Verwenden Sie „next-intl“ oder „Paraglide JS“.
Sie möchten, dass die Übersetzungen als Dateien in Ihrem Repo vorliegen und in Pull-Anfragen überprüft werden. Verwenden Sie „inlang“ zusammen mit Paraglide JS oder i18next.
Ihre App basiert auf React 18, dem Next.js Pages Router oder Next.js 14 oder einer älteren Version.
Ihre Website wurde mit einem CMS oder einem „ Website “-Baukasten erstellt, nicht mit React. Nutzen Sie die CMS-Integrationen von Weglot.

FAQ

Wird SEO unterstützt: eine URL pro Sprache und hreflang?

Heute nicht. Die Sprache des Besuchers wird in einem Cookie gespeichert, und jede Sprache wird unter denselben URLs bereitgestellt, sodass Suchmaschinen nur die Ausgangssprache indexieren.

Sie können Seitentitel und Beschreibungen mit tDynamicAll in generateMetadata. Wenn Sie bereits jetzt indexierte URLs pro Sprache benötigen, verwenden Sie eine Bibliothek mit Locale-Routing, wie beispielsweise next-intl oder Paraglide JS.

Wie übersetze ich dynamische „ content “ aus einem CMS, einer API oder von Benutzern?

Das Plugin übersetzt nur Text, der in Ihrer Datei „ code “ steht. Für „ content “, die Ihre Datei „ code “ niemals sieht, rufen Sie tDynamic, tDynamicAll oder tDynamicHtml aus @weglot/translate-react/dynamic in Next.js-Serverkomponenten.

Wenn die API länger als 500 ms benötigt oder ein Text zum ersten Mal angefordert wird, wird der Quelltext zurückgegeben. Die Übersetzung steht bei einer späteren Anfrage bereit. Wenn Sie Daten selbst zwischenspeichern, richten Sie den Cache nach der Sprache des Besuchers aus.

Next.js oder Vite: Was ändert sich?

Next.js verwendet withWeglot aus @weglot/translate-react/next und WeglotProvider aus @weglot/translate-react/react/next. Vite verwendet weglotPlugin aus @weglot/translate-react/vite und WeglotProvider aus @weglot/translate-react/react. Webpack verwendet weglotPlugin aus @weglot/translate-react/webpack.

Die dynamischen „ content “-Funktionen werden ausschließlich in Next.js-Serverkomponenten ausgeführt.

Funktioniert das mit React Server Components?

Ja, mit dem Next.js App Router. Importieren WeglotProvider aus @weglot/translate-react/react/next damit beim Wechseln der Sprache Ihre Serverkomponenten aktualisiert werden. tDynamic, tDynamicAll und tDynamicHtml serverseitig in Serverkomponenten ausgeführt werden.

Was passiert, wenn ich kompiliere?

Das Plugin findet den Text im JSX unter sourceRoot und fragt die „ Weglot “-API nach den fehlenden Übersetzungen ab. Weglot generiert diese mithilfe eines LLM, und der Build wartet bis zu translationTimeout (standardmäßig 300 Sekunden). Anschließend schreibt es public/translations/<locale>.json.

Wenn die Übersetzung fehlschlägt, schlägt der Build fehl und die empfangenen Daten werden im lokalen Cache gespeichert: Führen Sie den Build erneut durch, um fortzufahren. Mit buildMode: "cache-only", der Build führt keine Netzwerkaufrufe durch.

Wo werden die Übersetzungen gespeichert?

In Ihrem „ Weglot “-Projekt, wo Sie diese überprüfen und bearbeiten können. Jeder Build speichert außerdem die erhaltenen Übersetzungen in <sourceRoot>/weglot/cache/<locale>.json. Übernehmen Sie diesen Ordner in den Build, ohne die API aufzurufen, oder ignorieren Sie ihn. public/translations/ wird generiert und gelangt in .gitignore.

Was wird übersetzt, und wie kann ich etwas ausschließen?

Text in JSX, Zeichenfolgenliterale in JSX-Ausdrücken, aus Konstanten gelesene Zeichenfolgen und Attribute wie title, alt, placeholder und aria-label. Code, URLs, Klassennamen und Zeichenfolgen außerhalb von JSX bleiben unverändert. Hinzufügen translate="no" oder data-weglot-skip um ein Element in der Originalsprache beizubehalten. Definieren Sie Ihre eigenen Text-Props mit translatableAttributes.

Machen Sie Ihre React-App mehrsprachig, ohne sie neu zu schreiben

Installieren Sie das Paket, fügen Sie Ihren API-Schlüssel hinzu und führen Sie den Build durch.

Terminal

$ npm install @weglot/translate-react