@ weglot /translate-react

Oversett din
Reagere, Next.js eller Vite app

Ingen t()-innpakninger, ingen JSON-filer. Legg til en byggeplugin og en Weglot API-nøkkel: teksten i JSX-en din oversettes når appen din bygges, og teamet ditt redigerer oversettelser i Weglot uten å berøre koden.

Få API-nøkkelen din

Kopier ledeteksten for · · · les dokumentene · se på npm

Krever React 19 Next.js 15 / 16.0.4+ (appruter) eller Vite Node 20.9+

// how it works

Fire trinn. Komponentene dine forblir som de er.

Kilde- og målspråk kommer fra ditt Weglot prosjekt, ikke fra koden din. Plugin-modulen leser teksten i JSX-en din under bygging og henter oversettelsene.

  1. Installer pakken og legg til API-nøkkelen din

    Opprett en Weglot 2.0-prosjektet, og kopier deretter API-nøkkelen fra prosjektinnstillingene. Det starter med pk_. Behold .env ute av versjonskontroll.

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

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Legg til plugin-modulen

    Pakk Next.js-konfigurasjonen din med withWeglotPunkt sourceRoot til mappen som inneholder sidene og komponentene dine.

    neste.konfigurasjon.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. Legg til leverandøren

    Pakk rotoppsettet ditt med WeglotProvider fra Next.js-inngangspunktet, slik at endring av språk oppdaterer serverkomponentene dine.

    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. Bygg og send på alle språkene i prosjektet ditt

    Hvert bygg henter manglende oversettelser fra Weglot og skriver public/translations/<locale>.jsonIgnorer den mappen. Legg til en språkveksler med LocaleSwitcher eller useWeglotContext.

    .gitignore
    public/translations/

// compare

Hvorfor ikke et klassisk i18n-bibliotek?

i18n-biblioteker ber deg om å erstatte hver streng med en nøkkel og beholde én fil per språk. Weglot leser strengene du allerede har skrevet. Slik sammenligner du alternativene.

Basert på hvert prosjekts offentlige dokumentasjon ( Weglot , next-intl, Paraglide JS, Contentful, Sanity, Strapi), november 2026.
Kriterier Weglot
@weglot/translate-react		 neste-intl / i18next Paragliding JS CMS-lokalisering
Pakk inn strenger i t()- eller meldingsfunksjoner Ingen tekst i JSX oppdages under bygging. Jat("key") for hver streng. Jam.key() meldingsfunksjoner. Kun innhold. Strenger i koden din trenger fortsatt et bibliotek.
Oversettelsesfiler per språk Ingen å vedlikeholde Generert ved bygging, git-ignorert. Ja Vanligvis én JSON-fil per språkinnstillinger. Ja Én meldingsfil per språkinnstillinger. Nei Lagret i CMS-et.
Flerspråklig ruting og SEO (URL per språk, hreflang) Ikke ennå Språk lagret i en informasjonskapsel. Samme URL-er for alle språk, kildespråk indeksert. next-intl: ja Innebygd lokal ruting. i18next: gjennom rammeverksoppsettet ditt. Ja Lokaliserte URL-er innebygd: lokale prefikser, oversatte stier eller domener. Legg til hreflang-tagger selv. Frontend Et headless CMS lagrer innhold per språk. URL-er og hreflang kommer fra frontenden din.
Oversettelser generert for deg Ja Weglot oversetter med en LLM under byggingen. Ta med egne oversettelser eller et TMS. Med verktøy for maskinoversettelse i Inlang CLI eller din kodeagent. Betalt tilleggs- AI-oversettelse på betalte planer: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Rediger oversettelser uten en utvikler Ja , gjennomgå og rediger i Weglot dashbordet. Ingen redigering av JSON-filer eller legg til et separat TMS. Med Fink inlangs nettredaktør, med en GitHub-konto. Ja, i CMS-editoren.
Oppsett av en kodeagent i én ledetekst Ja Én installasjon, to konfigurasjonsredigeringer. Kopierbar ledetekst nedenfor. Lang oppgave Agenten omskriver hver streng til nøkler og filer. Lang oppgaveinit kjører uten forespørsler for agenter, da blir hver streng en m.key() beskjed. n/a Konfigurert i CMS-et.

// built for coding agents

Bygget for AI-kodingsagenter

Hvis du bygger med Claude Code, Cursor eller Codex, kan agenten din legge til Weglot på egenhånd. Det er ingen strenger som må omskrives, så endringen er liten og enkel å gjennomgå.

01 · oppsett

Agenten installerer og konfigurerer den

En npm install, én plugin, én leverandør, én linje inn .gitignoreAgenten ber deg bare om API-nøkkelen.

02 · dokumenter

Dokumenter som LLM-er kan lese

Dokumentasjonen har en llms.txt indeks, og hver side har en Markdown-versjon: legg til .md til URL-en.

03 · spørreskjema

En melding klar til kopiering

Hvert trinn i ledeteksten samsvarer med startveiledningen, med de virkelige importstiene. Kopier det nedenfor .

Lim inn Claude-koden

      

      
      
      
    

  

  







  

    
// for your team

    
Rediger og gjennomgå uten å berøre kode

    
Hver oversettelse vises i din Weglot prosjekt. Produkt-, markedsførings- og oversettere gjennomgår og redigerer ordlyden der, uten å åpne en pull request.

    
    
      
  • Se gjennom oversettelsene Weglot genererer for appen din.
    • 
      
  • Rediger enhver oversettelse i Weglot dashbord.
    • 
      
  • Utelukke alt fra kode med translate="no" eller data-weglot-skip.
    • 
    

  







  

    
// fit

    
Når du skal bruke Weglot , og når man ikke skal

    
Pakken er i forhåndsvisning. Her er hvor den passer inn i dag.

    

      

        
Bruk @ weglot /translate-react if

        
    
          
  • Appen din kjører React 19 på Next.js (App Router) eller Vite.
    • 
          
  • Du ønsker ikke å pakke inn strenger i t() eller vedlikeholde én fil per språk.
    • 
          
  • Kodeagenten din skriver mesteparten av koden, og du vil at oversettelsen skal holde tritt med den.
    • 
          
  • Folk som ikke koder må gjennomgå og redigere oversettelser.
    • 
          
  • UI-teksten din ligger i koden, med CMS-innhold kan du oversette til serversiden.
    • 
        

      

      

        
Bruk noe annet hvis

        
    
          
  • Du trenger én URL per språk og oversatte sider som er indeksert av søkemotorer i dag. Bruk next-intl eller Paraglide JS.
    • 
          
  • Du ønsker oversettelser som filer i repoet ditt, gjennomgått i pull-forespørsler. Bruk inlang med Paraglide JS eller i18next.
    • 
          
  • Appen din kjører React 18, Next.js Pages Router, eller Next.js 14 eller eldre.
    • 
          
  • Nettstedet ditt er bygget i et CMS eller en nettstedbygger, ikke i React. Bruk Weglot CMS-integrasjoner.
    • 
        

      

    

  







  

    
VANLIGE SPØRSMÅL

    

      

        
Håndterer den SEO: én URL per språk og hreflang?

        

          
Ikke i dag. Den besøkendes språk lagres i en informasjonskapsel, og alle språk serveres på de samme nettadressene, slik at søkemotorer kun indekserer kildespråket.

          
Du kan oversette sidetitler og beskrivelser med tDynamicAll i generateMetadataHvis du trenger indekserte URL-er per språk nå, bruk et bibliotek med lokal ruting, for eksempel next-intl eller Paraglide JS.

        

      

      

        
Hvordan oversetter jeg dynamisk innhold fra et CMS, et API eller brukere?

        

          
Pluginen oversetter bare tekst skrevet i koden din. For innhold koden din aldri ser, ring tDynamic, tDynamicAll eller tDynamicHtml fra @weglot/translate-react/dynamic i Next.js-serverkomponenter.

          
Hvis API-et bruker lengre tid enn 500 ms, eller en tekst blir forespurt for første gang, returnerer de kildeteksten. Oversettelsen er klar på en senere forespørsel. Hvis du mellomlagrer data selv, må mellomlagringen avhenge av den besøkendes språk.

        

      

      

        
Next.js eller Vite: hva endres?

        

          
Next.js bruker withWeglot fra @weglot/translate-react/next og WeglotProvider fra @weglot/translate-react/react/nextVite-bruk weglotPlugin fra @weglot/translate-react/vite og WeglotProvider fra @weglot/translate-react/reactWebpack bruker weglotPlugin fra @weglot/translate-react/webpack.

          
De dynamiske innholdsfunksjonene kjører bare i Next.js-serverkomponenter.

        

      

      

        
Fungerer det med React Server-komponenter?

        
Ja, med Next.js-appruteren. Importer WeglotProvider fra @weglot/translate-react/react/next slik at endring av språk oppdaterer serverkomponentene dine. tDynamic, tDynamicAll og tDynamicHtml kjøres på serversiden, i serverkomponenter.

      

      

        
Hva skjer når jeg bygger?

        

          
Plugin-modulen finner teksten i JSX under sourceRoot og spør den Weglot API for oversettelsene den mangler. Weglot genererer dem med en LLM, og byggingen venter opptil translationTimeout (300 sekunder som standard). Deretter skriver den public/translations/<locale>.json.

          
Hvis oversettelsen mislykkes, mislykkes byggingen og beholder det den mottok i den lokale hurtigbufferen: bygg på nytt for å fortsette. Med buildMode: "cache-only", bygget foretar ingen nettverkskall.

        

      

      

        
Hvor lagres oversettelsene?

        
I din Weglot prosjekt, hvor du gjennomgår og redigerer dem. Hvert bygg beholder også oversettelsene den mottok i <sourceRoot>/weglot/cache/<locale>.json. Lagre den mappen til bygging uten å kalle API-et, eller ignorer den. public/translations/ genereres og går inn .gitignore.

      

      

        
Hva blir oversatt, og hvordan kan jeg ekskludere noe?

        
Tekst i JSX, strenglitteraler i JSX-uttrykk, strenger lest fra konstanter og attributter som title, alt, placeholder og aria-labelKode, URL-er, klassenavn og strenger utenfor JSX blir stående uforstyrret. translate="no" eller data-weglot-skip for å beholde et element på originalspråket. Deklarer dine egne tekstrekvisitter med translatableAttributes.

      

    

  







  

    
Gjør React-appen din flerspråklig uten å omskrive den

    
Installer pakken, legg til API-nøkkelen din, og bygg.

    

      
terminal

      
$ npm install @weglot/translate-react

    

    

      
      Få API-nøkkelen din
    

    
Foretrekker du å gjøre det selv? Les dokumentasjonen eller se pakken på npm