@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

// what your users see

Den JSX-kod du skrev, på alla språk

Skriv texten en gång. Weglot översätter den vid kompilering.

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

Samma knapp, fem språk. Bredderna mäts i realtid.

app/inställningar/sida.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

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

Inga nycklar, inget t(). Skriv texten i JSX, så är det med det.

0t()-anrop för att lägga till
0översättningsfiler att underhålla
1npm install
2kodändringar: plugin och leverantör

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

// under the hood

Vad händer när man bygger

  1. 01Läserdin JSX
  2. 02Skickarett nytt SMS
  3. 03Weglot översätter
  4. 04Skriveren fil per språk

// every language of your project

En enda version, alla språk du lägger till

Välj språk på Weglot. De ingår i nästa version.

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

Lägg till ett språk på Weglot och kör sedan en kompilering. Översättningsfilerna distribueras tillsammans med din app.

// built for coding agents

Din mäklare ordnar det

Det finns inga strängar att skriva om, så ändringen är liten och lätt att granska.

Vilken kodningsagent som helst. Klistra in en prompt i den agent du redan använder.

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

Dokument som agenterna kan läsa. Ett llms.txt -index och Markdown-filer för varje sida.

✓Installerar paketetpackage.json
✓Lägger till tilläggetnext.config.ts
✓Lägger till leverantörenlayout.tsx
✓Ignorerar genererade filer.gitignore
?Begär din API-nyckel.env

En diff som du kan granska. Inga strängar har skrivits om.

Klistra in Claude-koden

      

      
      
      
    

  

        

        
Kopiera kommandot. Samma steg som i introduktionsguiden.

      

    

  










  

    
// what gets translated

    
Tillägget kan skilja mellan text och kod

    

      

      

        
app/prissättning/sida.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>
  );
}

      

      
Texten är översatt. JSX-text, bokstavliga värden, konstanter, alt, title, platshållare, aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Koden lämnas orörd. Klassnamn, URL:er, logik.

      
translate="no"
Det är upp till dig. Behåll alla element som de är, eller använd data-weglot-skip.

    

  











  

    
// for your team

    
Redigera och granska utan att röra koden

    

      

      

        
my-next-app › Tyska2 att granska

        
KällaTyskaStatus

        
Save changesÄnderungen speichernGranskat

        
Start your free trialKostenlos testenRedigering

        
Cancel anytime.Jederzeit kündbar.Sammanfattning

        
Choose your planWählen Sie Ihren TarifSammanfattning

      

      
Recension på Weglot. Produkt-, marknadsförings- och översättningsavdelningarna redigerar texten.

      
Edit saved · Kostenlos testen
No code change
Ingen pull-begäran för att rätta ett ord.

      
Håll koll på vad som har granskats. Se framstegen för varje språk.

    

  









  

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

    

      
Next.js-appens router
Stödd
Next.js 15 eller 16.0.4+, React 19.

      
Vite
Stödd
React 19, Node 20.9+. Webpack fungerar också.

      
React-serverkomponenter
Stödd
När du byter språk uppdateras dina serverkomponenter.

      
CMS- och API-innehåll
Stödd
Med tDynamic i Next.js-serverkomponenter.

      
Redigering av icke-utvecklare
Stödd
Granska och redigera i instrumentpanelen för ” Weglot ”.

      
En URL per språk
Inte än
Språket sparas idag i en cookie. Behöver nu indexerade URL:er per språk: använd next-intl eller Paraglide JS.

      
Översättningar som repo-filer
Översätt åtgärd
Weglot översätter dina JSON-språkfiler i GitHub Actions och skapar en pull-begäran. Se dokumentationen →

      
React 18, Pages Router
Stöds inte
Även Next.js 14 eller äldre.

      
CMS eller webbplatsbyggare
Inte det här paketet
Din webbplats är inte byggd i React: använd CMS-integrationerna på Weglot.

    

  











  

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


    
  










  

    
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