@weglot/translate-react

Vertaal je
Reageren, Next.js of Vite app

Geen t()-wrappers, geen JSON-bestanden. Voeg een build-plugin en een API-sleutel van Weglot toe: de tekst in je JSX wordt vertaald wanneer je app wordt gebouwd, en je team bewerkt de vertalingen op Weglot zonder de code aan te raken.

Vraag je API-sleutel aan

Kopieer de opdracht voor · · · lees de documentatie · bekijk op npm

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

// how it works

Vier stappen. Je onderdelen blijven zoals ze zijn.

De bron- en doeltalen zijn afkomstig uit je Weglot -project, niet uit je code. De plug-in leest de tekst in je JSX tijdens het bouwen en haalt de vertalingen op.

  1. Installeer het pakket en voeg je API-sleutel toe

    Maak een ‘ Weglot 2.0’-project aan en kopieer vervolgens de API-sleutel uit de projectinstellingen. Deze begint met pk_. Bewaar .env buiten de versiebeheeromgeving.

    terminal · .env
    $ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Voeg de plug-in toe

    Omhul je Next.js-configuratie met withWeglot. Punt sourceRoot naar de map waarin je pagina’s en componenten staan.

    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. De aanbieder toevoegen

    Omring je root-layout met WeglotProvider vanaf het startpunt van Next.js, zodat je servercomponenten worden vernieuwd wanneer je van taal wisselt.

    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. Ontwikkel en lever op in elke taal van je project

    Bij elke build worden ontbrekende vertalingen opgehaald van Weglot en worden deze opgeslagen public/translations/<locale>.json. Negeer die map. Voeg een taalschakelaar toe met LocaleSwitcher of useWeglotContext.

    .gitignore
    public/translations/

// compare

Waarom geen klassieke i18n-bibliotheek?

i18n-bibliotheken vragen je om elke tekenreeks te vervangen door een sleutel en één bestand per taal aan te houden. Weglot leest de tekenreeksen die je al hebt geschreven. Hieronder zie je een vergelijking van de opties.

Gebaseerd op de openbare documentatie van elk project (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), november 2026.
Criteria Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS CMS-lokalisatie in de oorspronkelijke taal
Zet strings tussen t() of berichtfuncties NeeTekst in JSX wordt tijdens het bouwen gedetecteerd. Jat("key") voor elke tekenreeks. Jam.key() berichtfuncties. Alleen inhoudVoor strings in je code heb je nog steeds een bibliotheek nodig.
Vertaalbestanden per taal Geen onderhoud nodigGegenererd tijdens het bouwen, genegeerd door Git. JaMeestal één JSON-bestand per taalversie. JaEén berichtbestand per taalversie. Neeopgeslagen in het CMS.
Meertalige routering en SEO (URL per taal, hreflang) Nog nietTaal opgeslagen in een cookie. Dezelfde URL's voor alle talen, brontaal geïndexeerd. next-intl: jaIngebouwde lokalisatierouting. i18next: via de configuratie van uw framework. JaIngebouwde gelokaliseerde URL's: locale-voorvoegsels, vertaalde paden of domeinen. Voeg zelf hreflang-tags toe. Front-endEen headless CMS slaat content per taalversie op. URL's en hreflang-attributen zijn afkomstig van je front-end.
Voor u gegenereerde vertalingen JaWeglot wordt tijdens het bouwen vertaald met een LLM. NeeNeem je eigen vertalingen of een TMS mee. Met behulp vaninlang CLI-machinevertaling, of je programmeeragent. Betaalde uitbreidingAI-vertaling bij betaalde abonnementen: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Vertalingen bewerken zonder hulp van een ontwikkelaar JaBekijk en bewerk dit in het dashboard van Weglot . NeeJSON-bestanden bewerken of een aparte TMS toevoegen. Met Finkde webeditor van inlang, met een GitHub-account. JaIn de CMS-editor.
Opgezet door een programmeeragent in één opdracht JaEén installatie, twee configuratiewijzigingen. Hieronder staat een kopieerbare prompt. Tijdrovende taakDe agent herschrijft elke tekenreeks naar sleutels en bestanden. Een langdurige taakinit zonder dat er om agenten wordt gevraagd, dan wordt elke tekenreeks een m.key() bericht. n.v.t.Geconfigureerd in het CMS.

// built for coding agents

Ontworpen voor AI-programmeeragenten

Als je met Claude Code, Cursor of Codex bouwt, kan je agent zelf ` Weglot ` toevoegen. Er hoeven geen strings te worden herschreven, dus de wijziging is klein en gemakkelijk te controleren.

01 · installatie

De medewerker installeert en configureert het

Eén npm install, één plug-in, één aanbieder, één regel in .gitignore. De agent vraagt je alleen om de API-sleutel.

02 · documenten

Documenten die LLM’s kunnen lezen

De documentatie bevat een llms.txt index, en elke pagina heeft een Markdown-versie: voeg toe .md aan de URL ervan.

03 · opdracht

Een tekst die je direct kunt kopiëren

Elke stap van de instructie komt overeen met de handleiding voor beginners, met de daadwerkelijke importpaden. Kopieer deze hieronder.

Plak de Claude-code hier

      

      
      
      
    

  

  







  

    
// for your team

    
Bewerken en controleren zonder de code aan te raken

    
Elke vertaling verschijnt in je Weglot -project. Medewerkers van de product- en marketingafdelingen en vertalers bekijken en bewerken de tekst daar, zonder een pull-verzoek te openen.

    
    
      
  • Controleer de vertalingen die Weglot voor je app genereert.
    • 
      
  • Je kunt elke vertaling bewerken in het dashboard van Weglot .
    • 
      
  • Uitsluiten alles wat uit de code komt met translate="no" of data-weglot-skip.
    • 
    

  







  

    
// fit

    
Wanneer moet je ‘ Weglot ’ gebruiken, en wanneer niet?

    
Het pakket bevindt zich in de preview-fase. Dit is waar het op dit moment in past.

    

      

        
Gebruik @weglot/translate-react als

        
    
          
  • Je app draait op React 19 met Next.js (App Router) of Vite.
    • 
          
  • Je wilt strings niet in t() omhullen of voor elke taal een apart bestand bijhouden.
    • 
          
  • Je programmeur schrijft het grootste deel van de code, en je wilt dat de vertaling daarmee gelijke tred houdt.
    • 
          
  • Mensen die niet kunnen programmeren, moeten vertalingen controleren en aanpassen.
    • 
          
  • Je UI-tekst staat in de code; CMS-inhoud kun je aan de serverzijde vertalen.
    • 
        

      

      

        
Gebruik iets anders als

        
    
          
  • Je hebt één URL per taal nodig en de vertaalde pagina’s moeten vandaag nog door zoekmachines worden geïndexeerd. Gebruik next-intl of Paraglide JS.
    • 
          
  • Je wilt vertalingen als bestanden in je repository hebben, die via pull-verzoeken worden gecontroleerd. Gebruik inlang in combinatie met Paraglide JS of i18next.
    • 
          
  • Je app draait op React 18, de Next.js Pages Router of Next.js 14 of ouder.
    • 
          
  • Je website is gebouwd met een CMS of een websitebouwer, niet met React. Maak gebruik van de CMS-integraties op Weglot.
    • 
        

      

    

  







  

    
FAQ

    

      

        
Wordt er rekening gehouden met SEO: één URL per taal en hreflang?

        

          
Vandaag niet. De taal van de bezoeker wordt opgeslagen in een cookie en elke taal wordt via dezelfde URL’s weergegeven, waardoor zoekmachines alleen de brontaal indexeren.

          
Je kunt paginatitels en beschrijvingen vertalen met tDynamicAll in generateMetadata. Als je nu per taal geïndexeerde URL’s nodig hebt, gebruik dan een bibliotheek met locale-routing, zoals next-intl of Paraglide JS.

        

      

      

        
Hoe vertaal ik dynamische inhoud uit een CMS, een API of van gebruikers?

        

          
De plug-in vertaalt alleen tekst die in je code staat. Voor inhoud die je code nooit te zien krijgt, roep je tDynamic, tDynamicAll of tDynamicHtml uit @weglot/translate-react/dynamic in Next.js-servercomponenten.

          
Als de API langer dan 500 ms nodig heeft, of als een tekst voor het eerst wordt opgevraagd, wordt de brontekst weergegeven. Bij een volgende aanvraag is de vertaling dan beschikbaar. Als je zelf gegevens in de cache opslaat, laat de cache dan afhangen van de taal van de bezoeker.

        

      

      

        
Next.js of Vite: wat verandert er?

        

          
Next.js maakt gebruik van withWeglot uit @weglot/translate-react/next en WeglotProvider uit @weglot/translate-react/react/next. Vite maakt gebruik van weglotPlugin uit @weglot/translate-react/vite en WeglotProvider uit @weglot/translate-react/react. Webpack maakt gebruik van weglotPlugin uit @weglot/translate-react/webpack.

          
De functies voor dynamische inhoud werken alleen in Next.js-servercomponenten.

        

      

      

        
Werkt het met React Server Components?

        
Ja, met de Next.js App Router. Importeer WeglotProvider uit @weglot/translate-react/react/next zodat het wijzigen van de taal ervoor zorgt dat je servercomponenten worden vernieuwd. tDynamic, tDynamicAll en tDynamicHtml worden aan de serverzijde uitgevoerd, in servercomponenten.

      

      

        
Wat gebeurt er als ik bouw?

        

          
De plug-in zoekt de tekst in de JSX onder sourceRoot en vraagt de API van Weglot om de ontbrekende vertalingen. Weglot genereert deze met een LLM, en de build wacht maximaal translationTimeout (standaard 300 seconden). Vervolgens schrijft het public/translations/<locale>.json.

          
Als het vertalen mislukt, mislukt de build en wordt de ontvangen informatie in de lokale cache bewaard: voer de build opnieuw uit om door te gaan. Met buildMode: "cache-only", de build voert geen netwerkverzoeken uit.

        

      

      

        
Waar worden de vertalingen opgeslagen?

        
In je Weglot -project, waar je ze kunt bekijken en bewerken. Elke build bewaart ook de vertaalde teksten die het heeft ontvangen in <sourceRoot>/weglot/cache/<locale>.json. Voeg die map toe aan de build zonder de API aan te roepen, of negeer deze. public/translations/ wordt gegenereerd en gaat naar .gitignore.

      

      

        
Wat wordt er vertaald, en hoe kan ik iets uitsluiten?

        
Tekst in JSX, tekenreeksletterlijke waarden in JSX-uitdrukkingen, tekenreeksen die uit constanten worden gelezen, en attributen zoals title, alt, placeholder en aria-label. Code, URL’s, klassennamen en tekenreeksen buiten JSX blijven ongewijzigd. Voeg toe translate="no" of data-weglot-skip om een element in de oorspronkelijke taal te behouden. Definieer je eigen tekst-props met translatableAttributes.

      

    

  







  

    
Maak je React-app meertalig zonder deze te herschrijven

    
Installeer het pakket, voeg je API-sleutel toe en bouw het.

    

      
terminal

      
$ npm install @weglot/translate-react

    

    

      
      Vraag je API-sleutel aan
    

    
Wil je het liever zelf doen? Lees dan de documentatie of bekijk het pakket op npm