@weglot/translate-react

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

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

// what your users see

Das von dir geschriebene JSX, in jeder Sprache

Schreiben Sie den Text einmal. Weglot übersetzt ihn zur Kompilierungszeit.

enSave changessource
deÄnderungen speichern
frEnregistrer
ja変更を保存
arحفظ التغييراتRTL

Ein und dieselbe Schaltfläche, fünf Sprachen. Breiten werden in Echtzeit gemessen.

app/settings/page.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

// no key, no t(), no en.json

Keine Schlüssel, kein t(). Schreibe den Text einfach in JSX, das ist alles.

0t()-Aufrufe zum Hinzufügen
0zu pflegende Übersetzungsdateien
1npm install
2code Änderungen: Plugin und Anbieter

// 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.

  1. 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

  2. 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.

    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" });
}

  3. Anbieter hinzufügen

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

    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>
  );
}

  4. 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/

// under the hood

Was passiert, wenn man baut?

  1. 01LiestIhr JSX
  2. 02 Sendeteine neue SMS
  3. 03 „Weglot “ bedeutet
  4. 04Schreibteine Datei pro Sprache

// every language of your project

Ein Build, jede Sprache, die Sie hinzufügen

Wählen Sie die Sprachen unter Weglot aus. Sie werden mit dem nächsten Build ausgeliefert.

SourceEnglishen
FrançaisFrench
DeutschGerman
EspañolSpanish
PortuguêsPortuguese
日本語Japanese
中文Chinese
한국어Korean
हिन्दीHindi
РусскийRussian
العربيةArabic · RTL
עבריתHebrew · RTL
+110 languagesSee the full list →

Fügen Sie unter Weglot eine Sprache hinzu und führen Sie anschließend den Build durch. Die Übersetzungsdateien werden zusammen mit Ihrer App bereitgestellt.

// built for coding agents

Ihr Makler kümmert sich darum

Es müssen keine Zeichenfolgen umgeschrieben werden, daher ist die Änderung geringfügig und leicht zu überprüfen.

Ein beliebiger coding -Agent. Fügen Sie eine Eingabeaufforderung in den von Ihnen bereits verwendeten Agenten ein.

react/getting-started.md
react/dynamic-content.md
react/use-cases.md
developers.weglot.com/llms.txt

Dokumente, die von Agenten gelesen werden können. Ein „llms.txt “-Index und Markdown-Dateien für jede Seite.

✓Installiert das Paketpackage.json
✓Fügt das Plugin hinzunext.config.ts
✓Fügt den Anbieter hinzulayout.tsx
✓Ignoriert generierte Dateien.gitignore
?Fragt nach Ihrem API-Schlüssel.env

Ein Diff, den du überprüfen kannst. Es wurden keine Zeilen umgeschrieben.

In Claude einfügen Code

      

      
      
      
    

  

        

        
Kopieren Sie die Eingabeaufforderung. Die Schritte entsprechen denen in der Einführungsanleitung.

      

    

  










  

    
// what gets translated

    
Das Plugin erkennt Text aus code

    

      

      

        
app/pricing/page.tsx


export default function Pricing() {
  return (
    <section className="pricing">
      <h2>Choose your plan</h2>
      <input placeholder="Email address" />
      <a href="/signup">{"Start free trial"}</a>
      <span translate="no">Weglot</span>
    </section>
  );
}

      

      
Der Text wird übersetzt. JSX-Text, Literale, Konstanten, „alt“, „title“, Platzhalter, „aria-label“.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Code bleibt unverändert. Klassennamen, URLs, Logik.

      
translate="no"
Das liegt ganz bei dir. Behalte jedes Element unverändert bei oder verwende „data-weglot-skip“.

    

  











  

    
// for your team

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

    

      

      

        
my-next-app › Deutsch2 zu überprüfen

        
QuelleDeutschStatus

        
Save changesÄnderungen speichernRedigiert

        
Start your free trialKostenlos testenBearbeitung

        
Cancel anytime.Jederzeit kündbar.Zur Wiederholung

        
Choose your planWählen Sie Ihren TarifZur Wiederholung

      

      
Rezension unter Weglot. Die Formulierungen werden von den Produkt-, Marketing- und Übersetzungsteams überarbeitet.

      
Edit saved · Kostenlos testen
No code change
Kein Pull-Request, um ein Wort zu korrigieren.

      
Verfolgen Sie, was bereits durchgearbeitet wurde. Sehen Sie sich den Fortschritt für jede Sprache an.

    

  









  

    
// fit

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

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

    

      
Next.js-App-Router
Unterstützt
Next.js 15 oder 16.0.4+, React 19.

      
Vite
Unterstützt
React 19, Node 20.9+. Webpack funktioniert ebenfalls.

      
React-Serverkomponenten
Unterstützt
Durch das Ändern der Sprache werden Ihre Serverkomponenten aktualisiert.

      
CMS und API content
Unterstützt
Mit tDynamic in Next.js-Serverkomponenten.

      
Bearbeitung durch Nicht-Entwickler
Unterstützt
Überprüfen und bearbeiten Sie den Text unter Weglot dashboard .

      
Eine URL pro Sprache
Noch nicht
Die Sprache wird derzeit in einem Cookie gespeichert. Sie benötigen jetzt indizierte URLs pro Sprache: Verwenden Sie „next-intl“ oder „Paraglide JS“.

      
Übersetzungen als Repo-Dateien
Übersetzungsaktion
Weglot übersetzt Ihre JSON-Lokalisierungsdateien in GitHub Actions und eröffnet einen Pull-Request. Siehe die Dokumentation →

      
React 18, Seiten-Router
Wird nicht unterstützt
Außerdem Next.js 14 oder älter.

      
CMS- oder „ Website “-Generator
Nicht dieses Paket
Ihre Website wurde nicht mit React erstellt: Nutzen Sie die CMS-Integrationen von Weglot.

    

  











  

    
// 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.


    
  










  

    
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

    

    

      
      Holen Sie sich Ihren API-Schlüssel
    

    
Möchten Sie es lieber selbst machen? Lesen Sie die Dokumentation oder sehen Sie sich das Paket auf npm an.