@ 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

// what your users see

JSX-en du skrev, på alle språk

Skriv teksten én gang. Weglot oversetter det under bygging.

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

Samme knapp, fem språk. Bredder målt live.

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

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

Ingen nøkler, ingen t(). Skriv teksten i JSX, det er alt.

0 t() kaller for å legge til
0 oversettelsesfiler å vedlikeholde
1 npm-installasjon
2 koderedigeringer: plugin og leverandør

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

// under the hood

Hva skjer når du bygger

  1. 01 Leser JSX-en din
  2. 02 Sender ny tekstmelding
  3. 03 Weglot oversetter
  4. 04 Skriver én fil per språk

// every language of your project

Én versjon, hvert språk du legger til

Velg språk i Weglot Den neste versjonen sender dem.

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

Legg til et språk i Weglot , og bygg deretter. Oversettelsesfiler distribueres med appen din.

// built for coding agents

Agenten din setter det opp

Ingen strenger som må omskrives, så endringen er liten og enkel å gjennomgå.

Enhver kodeagent. Lim inn én ledetekst i agenten du allerede bruker.

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

Dokumentagenter kan lese. En llms.txt -indeks og Markdown for hver side.

✓Installerer pakkenpackage.json
✓Legger til plugin-modulennext.config.ts
✓Legger til leverandørenlayout.tsx
✓Ignorerer genererte filer.gitignore
?Ber om API-nøkkelen din.env

En diff du kan gjennomgå. Ingen strenger er omskrevet.

Lim inn Claude-koden

      

      
      
      
    

  

        

        
Kopier ledeteksten. Samme trinn som i startveiledningen.

      

    

  










  

    
// what gets translated

    
Plugin-modulen kjenner igjen tekst fra kode

    

      

      

        
app/prising/side.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>
  );
}

      

      
Tekst er oversatt. JSX-tekst, litteraler, konstanter, alt, tittel, plassholder, arie-etikett.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Koden blir stående i fred. Klassenavn, URL-er, logikk.

      
translate="no"
Ditt kall. Behold ethvert element som det er, eller bruk data- weglot -skip.

    

  











  

    
// for your team

    
Rediger og gjennomgå uten å berøre kode

    

      

      

        
my-next-app › Tysk 2 å anmelde

        
Kilde Tysk status

        
Save changesÄnderungen speichernAnmeldt

        
Start your free trialKostenlos testenRedigering

        
Cancel anytime.Jederzeit kündbar.Å gjennomgå

        
Choose your planWählen Sie Ihren TarifÅ gjennomgå

      

      
Anmeldelse i Weglot Produkt-, markedsførings- og oversettere redigerer ordlyden.

      
Edit saved · Kostenlos testen
No code change
Ingen pull-forespørsel for å fikse et ord.

      
Spor hva som blir gjennomgått. Se fremdriften for hvert språk.

    

  









  

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

    

      
Next.js-appruter
Støttet
Next.js 15 eller 16.0.4+, React 19.

      
Vite
Støttet
React 19, Node 20.9+. Webpack fungerer også.

      
React Server-komponenter
Støttet
Å endre språk oppdaterer serverkomponentene dine.

      
CMS- og API-innhold
Støttet
Med tDynamic i Next.js-serverkomponenter.

      
Redigering for ikke-utviklere
Støttet
Se gjennom og rediger i Weglot dashbord.

      
Én URL per språk
Ikke ennå
Språket lagres i en informasjonskapsel i dag. Trenger indekserte URL-er per språk nå: bruk next-intl eller Paraglide JS.

      
Oversettelser som repofiler
Oversettelseshandling
Weglot oversetter JSON-lokalfilene dine i GitHub Actions og åpner en pull-forespørsel. Se dokumentasjonen →

      
React 18, Pages-ruter
Ikke støttet
Også Next.js 14 eller eldre.

      
CMS eller nettstedbygger
Ikke denne pakken
Nettstedet ditt er ikke bygget i React: bruk Weglot CMS-integrasjoner.

    

  











  

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


    
  










  

    
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