@weglot/translate-react

Översätt din
Reagera, Next.js eller Vite app

Inga t()-wrappers, inga JSON-filer. Lägg till ett byggplugin och en API-nyckel från Weglot : texten i din JSX översätts när appen byggs, och ditt team redigerar översättningarna på Weglot utan att behöva röra koden.

Skaffa din API-nyckel

Kopiera uppmaningen för · · · läs dokumentationen · visa på npm

Kräver React 19 Next.js 15 / 16.0.4+ (App Router) eller Vite Node 20.9+

// how it works

Fyra steg. Dina komponenter förblir oförändrade.

Käll- och målspråken hämtas från ditt Weglot -projekt, inte från din kod. Tillägget läser texten i din JSX vid kompilering och hämtar översättningarna.

  1. Installera paketet och lägg till din API-nyckel

    Skapa ett projekt i Weglot 2.0 och kopiera sedan API-nyckeln från projektinställningarna. Den börjar med pk_. Fortsätt .env utanför versionshanteringen.

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

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Lägg till tillägget

    Omgärda din Next.js-konfiguration med withWeglot. Punkt sourceRoot till mappen där dina sidor och komponenter finns.

    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. Lägg till leverantören

    Omgärda din rotlayout med WeglotProvider från Next.js-startpunkten, så att en ändring av språk uppdaterar dina serverkomponenter.

    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. Kompilera och distribuera på alla språk i ditt projekt

    Vid varje kompilering hämtas saknade översättningar från Weglot och skrivs public/translations/<locale>.json. Strunta i den mappen. Lägg till en språkväljare med LocaleSwitcher eller useWeglotContext.

    .gitignore
    public/translations/

// compare

Varför inte ett klassiskt i18n-bibliotek?

i18n-bibliotek kräver att du ersätter varje sträng med en nyckel och har en fil per språk. Weglot läser in de strängar du redan har skrivit. Här ser du en jämförelse mellan alternativen.

Baserat på de olika projektens offentliga dokumentation (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), november 2026.
Kriterier Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS CMS-anpassad lokalisering
Omgärda strängar med t() eller meddelandefunktioner Nejtext i JSX upptäcks vid kompilering. Jat("key") för varje sträng. Jam.key() meddelandefunktioner. Endast innehållSträngar i din kod kräver fortfarande ett bibliotek.
Översättningsfiler per språk Inget att underhållaGenereras vid kompilering, ignoreras av Git. JaVanligtvis en JSON-fil per språkversion. JaEn meddelandefil per språkversion. Nejlagras i CMS.
Flerspråkig omdirigering och SEO (URL per språk, hreflang) Inte ännuSpråket lagras i en cookie. Samma URL:er för alla språk, källspråket indexeras. next-intl: jaInbyggd lokaliseringsrouting. i18next: via inställningarna i ditt ramverk. JaInbyggda lokaliserade URL:er: språkprefix, översatta sökvägar eller domäner. Lägg till hreflang-taggar själv. FrontendEtt headless CMS lagrar innehåll per språkversion. URL:er och hreflang kommer från din frontend.
Översättningar som har genererats åt dig JaWeglot översätts med en LLM under byggprocessen. NejTa med dina egna översättningar eller ett TMS. Med hjälp av verktyginlang CLI-maskinöversättning eller din kodningsagent. Betalt tilläggAI-översättning i betalda abonnemang: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Redigera översättningar utan hjälp av en utvecklare JaGranska och redigera i Weglot -instrumentpanelen. NejRedigera JSON-filer eller lägg till en separat TMS. Med Finkinlangs webbredigerare, med ett GitHub-konto. JaI CMS-redigeraren.
Skapad av en kodningsagent i en enda kommando JaEn installation, två konfigurationsändringar. Kopierbar kommandorad nedan. Lång uppgiftAgenten omformaterar varje sträng till nycklar och filer. Lång uppgiftinit körs utan att fråga efter agenter, då blir varje sträng en m.key() meddelande. ej tillämpligtKonfigureras i CMS.

// built for coding agents

Utvecklad för AI-kodningsagenter

Om du bygger med Claude Code, Cursor eller Codex kan din agent själv lägga till Weglot . Det finns inga strängar som behöver skrivas om, så ändringen är liten och lätt att granska.

01 · inställningar

Agenten installerar och konfigurerar den

Ett npm install, ett plugin, en leverantör, en rad i .gitignore. Agent begär endast att du anger API-nyckeln.

02 · dokument

Dokument som stora språkmodeller (LLM) kan läsa

Dokumentationen innehåller en llms.txt index, och varje sida har en Markdown-version: lägg till .md till dess URL.

03 · uppmaning

En text som är redo att kopieras

Varje steg i anvisningen följer introduktionsguiden och innehåller de faktiska importvägarna. Kopiera den nedan.

Klistra in Claude-koden

      

      
      
      
    

  

  







  

    
// for your team

    
Redigera och granska utan att röra koden

    
Varje översättning visas i ditt projekt på Weglot . Produktansvariga, marknadsförare och översättare granskar och redigerar texten där, utan att behöva skapa en pull-begäran.

    
    
      
  • Granska de översättningar som Weglot genererar för din app.
    • 
      
  • Redigera valfri översättning i kontrollpanelen för ” Weglot ”.
    • 
      
  • Uteslut vad som helst från kod med translate="no" eller data-weglot-skip.
    • 
    

  







  

    
// fit

    
När man ska använda ” Weglot ” och när man inte ska göra det

    
Paketet befinner sig i förhandsgranskningsfasen. Här är var det passar in just nu.

    

      

        
Använd @weglot/translate-react om

        
    
          
  • Din app kör React 19 på Next.js (App Router) eller Vite.
    • 
          
  • Du vill inte sätta t() runt strängar eller ha en fil per språk.
    • 
          
  • Din kodningsagent skriver större delen av koden, och du vill att översättningen ska hålla jämna steg med den.
    • 
          
  • Personer som inte kan programmera behöver granska och redigera översättningarna.
    • 
          
  • Din gränssnittstext finns i koden, medan CMS-innehåll kan översättas på serversidan.
    • 
        

      

      

        
Använd något annat om

        
    
          
  • Du behöver en URL per språk och översatta sidor som är indexerade av sökmotorerna redan idag. Använd next-intl eller Paraglide JS.
    • 
          
  • Du vill ha översättningarna som filer i ditt repo, granskade i pull-förfrågningar. Använd inlang tillsammans med Paraglide JS eller i18next.
    • 
          
  • Din app bygger på React 18, Next.js Pages Router eller Next.js 14 eller äldre.
    • 
          
  • Din webbplats är byggd i ett CMS eller en webbplatsbyggare, inte i React. Använd CMS-integrationerna på Weglot.
    • 
        

      

    

  







  

    
VANLIGA FRÅGOR

    

      

        
Stöder den SEO: en URL per språk och hreflang?

        

          
Inte idag. Besökarens språk sparas i en cookie och alla språk visas på samma webbadresser, vilket innebär att sökmotorerna endast indexerar källspråket.

          
Du kan översätta sidrubriker och beskrivningar med tDynamicAll i generateMetadata. Om du redan nu behöver indexerade URL:er per språk kan du använda ett bibliotek med språkbaserad vidarekoppling, till exempel next-intl eller Paraglide JS.

        

      

      

        
Hur översätter jag dynamiskt innehåll från ett CMS, ett API eller användare?

        

          
Pluginet översätter endast text som finns i din kod. För innehåll som din kod aldrig kommer i kontakt med, anropa tDynamic, tDynamicAll eller tDynamicHtml från @weglot/translate-react/dynamic i Next.js-serverkomponenter.

          
Om API:et tar längre tid än 500 ms, eller om en text begärs för första gången, returnerar de källtexten. Översättningen är klar vid en senare förfrågan. Om du själv cachelagrar data bör du anpassa cachen efter besökarens språk.

        

      

      

        
Next.js eller Vite: vad förändras?

        

          
Next.js använder withWeglot från @weglot/translate-react/next och WeglotProvider från @weglot/translate-react/react/next. Vite använder weglotPlugin från @weglot/translate-react/vite och WeglotProvider från @weglot/translate-react/react. Webpack använder weglotPlugin från @weglot/translate-react/webpack.

          
Funktionerna för dynamiskt innehåll körs endast i Next.js-serverkomponenter.

        

      

      

        
Fungerar det med React Server Components?

        
Ja, med Next.js App Router. Importera WeglotProvider från @weglot/translate-react/react/next så att ett byte av språk uppdaterar dina serverkomponenter. tDynamic, tDynamicAll och tDynamicHtml körs på serversidan, i serverkomponenter.

      

      

        
Vad händer när jag bygger?

        

          
Tillägget hittar texten i JSX-koden under sourceRoot och begär de översättningar som saknas från API:et Weglot . Weglot genererar dem med hjälp av en LLM, och byggprocessen väntar i upp till translationTimeout (300 sekunder som standard). Därefter skriver den public/translations/<locale>.json.

          
Om översättningen misslyckas misslyckas kompileringen och det som mottagits sparas i den lokala cachen: kompilera på nytt för att fortsätta. Med buildMode: "cache-only", gör den här versionen inga nätverksanrop.

        

      

      

        
Var lagras översättningarna?

        
I ditt projekt Weglot , där du granskar och redigerar dem. Varje build sparar också de översättningar som den har tagit emot i <sourceRoot>/weglot/cache/<locale>.json. Lägg in den mappen i byggprocessen utan att anropa API:et, eller ignorera den. public/translations/ genereras och hamnar i .gitignore.

      

      

        
Vad översätts, och hur utesluter jag något?

        
Text i JSX, strängliteraler i JSX-uttryck, strängar som läses in från konstanter samt attribut såsom title, alt, placeholder och aria-label. Kod, URL:er, klassnamn och strängar utanför JSX lämnas oförändrade. Lägg till translate="no" eller data-weglot-skip för att behålla ett element på originalspråket. Definiera dina egna textattribut med translatableAttributes.

      

    

  







  

    
Gör din React-app flerspråkig utan att skriva om den

    
Installera paketet, lägg till din API-nyckel och kompilera.

    

      
terminal

      
$ npm install @weglot/translate-react

    

    

      
      Skaffa din API-nyckel
    

    
Vill du hellre göra det själv? Läs dokumentationen eller kolla in paketet på npm