@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

// what your users see

De JSX die je hebt geschreven, in elke taal

Schrijf de tekst één keer. Weglot vertaalt deze tijdens het bouwen.

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

Eén knop, vijf talen. Breedtes worden in realtime gemeten.

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

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

Geen sleutels, geen t(). Schrijf de tekst gewoon in JSX, dat is alles.

0t()-aanroepen om toe te voegen
0te onderhouden vertaalbestanden
1npm install
2wijzigingen in de code: plug-in en provider

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

// under the hood

Wat gebeurt er als je bouwt

  1. 01Leestje JSX
  2. 02Verzendteen nieuw bericht
  3. 03Weglot vertaalt
  4. 04Maaktéén bestand per taal aan

// every language of your project

Eén build, voor elke taal die je toevoegt

Kies talen op Weglot. Deze worden in de volgende build meegeleverd.

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

Voeg een taal toe via Weglot en voer vervolgens de build uit. De vertaalbestanden worden samen met je app geïmplementeerd.

// built for coding agents

Je makelaar regelt het

Er hoeven geen strings te worden herschreven, dus de wijziging is klein en gemakkelijk te controleren.

Elke codeeragent. Plak één prompt in de agent die je al gebruikt.

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

Bestanden die agents kunnen lezen. Een llms.txt -index en Markdown-bestanden voor elke pagina.

✓Installeert het pakketpackage.json
✓Voegt de plug-in toenext.config.ts
✓Voegt de provider toelayout.tsx
✓Negeert gegenereerde bestanden.gitignore
?Vraagt om je API-sleutel.env

Een diff die je kunt bekijken. Er zijn geen regels herschreven.

Plak de Claude-code hier

      

      
      
      
    

  

        

        
Kopieer de opdracht. Volg dezelfde stappen als in de handleiding voor beginners.

      

    

  










  

    
// what gets translated

    
De plug-in kan tekst van code onderscheiden

    

      

      

        
app/prijzen/pagina.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>
  );
}

      

      
De tekst is vertaald. JSX-tekst, letterlijke waarden, constanten, alt, title, placeholder, aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
De code blijft ongewijzigd. Klassennamen, URL’s, logica.

      
translate="no"
De keuze is aan jou. Je kunt elk element ongewijzigd laten, of de attributen `data-weglot-skip` gebruiken.

    

  











  

    
// for your team

    
Bewerken en controleren zonder de code aan te raken

    

      

      

        
my-next-app › Duits2 om te beoordelen

        
BronDuitsStatus

        
Save changesÄnderungen speichernBeoordeeld

        
Start your free trialKostenlos testenBewerken

        
Cancel anytime.Jederzeit kündbar.Ter herhaling

        
Choose your planWählen Sie Ihren TarifTer herhaling

      

      
Recensie op Weglot. De tekst wordt bewerkt door de product-, marketing- en vertaalafdelingen.

      
Edit saved · Kostenlos testen
No code change
Geen pull-verzoek om een woord te corrigeren.

      
Houd bij wat er is doorgenomen. Bekijk de voortgang per taal.

    

  









  

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

    

      
Next.js-app-router
Ondersteund
Next.js 15 of 16.0.4+, React 19.

      
Vite
Ondersteund
React 19, Node 20.9+. Webpack werkt ook.

      
React-servercomponenten
Ondersteund
Als je de taal wijzigt, worden je servercomponenten vernieuwd.

      
CMS- en API-inhoud
Ondersteund
Met tDynamic in Next.js-servercomponenten.

      
Bewerken door niet-ontwikkelaars
Ondersteund
Bekijk en bewerk dit in het dashboard van de ‘ Weglot ’.

      
Eén URL per taal
Nog niet
De taal wordt momenteel in een cookie opgeslagen. Je hebt nu geïndexeerde URL’s per taal nodig: gebruik next-intl of Paraglide JS.

      
Vertalingen als repo-bestanden
Vertaalactie
Weglot vertaalt je JSON-locale-bestanden in GitHub Actions en opent een pull-verzoek. Zie de documentatie →

      
React 18, Pages Router
Niet ondersteund
Ook Next.js 14 of ouder.

      
CMS of websitebouwer
Niet dit pakket
Je website is niet gebouwd met React: maak gebruik van de CMS-integraties op Weglot.

    

  











  

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


    
  










  

    
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