@weglot/translate-react

Traduci il tuo
Reagisci, Next.js oppure Vite app

Niente wrapper t(), niente file JSON. Basta aggiungere un plugin di compilazione e una chiave API di Weglot : il testo nel tuo JSX viene tradotto durante la compilazione dell'app e il tuo team può modificare le traduzioni su Weglot senza dover modificare il codice.

Ottieni la tua chiave API

Copia il prompt per · · · leggi la documentazione · visualizza su npm

// what your users see

Il codice JSX che hai scritto, in ogni linguaggio

Scrivi il testo una sola volta. Weglot lo traduce in fase di compilazione.

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

Stesso pulsante, cinque lingue. Larghezze misurate in tempo reale.

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

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

Niente chiavi, niente t(). Scrivi il testo in JSX, tutto qui.

0chiamate a t() da aggiungere
0file di traduzione da gestire
1npm install
2modifiche al codice: plugin e provider

// how it works

Quattro passaggi. I tuoi componenti rimangono così come sono.

Le lingue di origine e di destinazione provengono dal tuo progetto Weglot , non dal tuo codice. Il plugin legge il testo nel tuo JSX in fase di compilazione e recupera le relative traduzioni.

  1. Installa il pacchetto e aggiungi la tua chiave API

    Crea un progetto " Weglot " 2.0, quindi copia la chiave API dalle impostazioni del progetto. Inizia con pk_. Continua .env fuori dal controllo di versione.

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

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Aggiungi il plugin

    Incorpora la configurazione di Next.js con withWeglot. Punto sourceRoot nella cartella che contiene le tue pagine e i tuoi componenti.

    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. Aggiungi il fornitore

    Racchiudi il layout delle radici con WeglotProvider dal punto di ingresso di Next.js, in modo che la modifica della lingua comporti l'aggiornamento dei componenti del server.

    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. Compila e distribuisci in tutte le lingue del tuo progetto

    Ogni build recupera le traduzioni mancanti da Weglot e scrive public/translations/<locale>.json. Ignora quella cartella. Aggiungi un selettore di lingua con LocaleSwitcher oppure useWeglotContext.

    .gitignore
    public/translations/

// under the hood

Cosa succede quando si costruisce

  1. 01 Leggeil tuo JSX
  2. 02Inviaun nuovo messaggio
  3. 03 Traduzione di "Weglot "
  4. 04Creaun file per ogni lingua

// every language of your project

Una sola versione, per tutte le lingue che aggiungi

Seleziona le lingue su Weglot. Saranno incluse nella prossima versione.

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

Aggiungi una lingua in Weglot, quindi esegui la compilazione. I file di traduzione verranno distribuiti insieme alla tua app.

// built for coding agents

È il tuo agente a occuparsene

Non ci sono stringhe da riscrivere, quindi la modifica è minima e facile da verificare.

Qualsiasi agente di codifica. Incolla un prompt nell'agente che già utilizzi.

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

I documenti che gli agenti possono leggere. Un file di indice llms.txt e un file Markdown per ogni pagina.

✓Installa il pacchettopackage.json
✓Aggiunge il pluginnext.config.ts
✓Aggiunge il providerlayout.tsx
✓Ignora i file generati.gitignore
?Richiede la tua chiave API.env

Un diff che puoi controllare. Nessuna stringa è stata riscritta.

Incolla nel Claude Code

      

      
      
      
    

  

        

        
Copia il prompt. Segui gli stessi passaggi indicati nella guida introduttiva.

      

    

  










  

    
// what gets translated

    
Il plugin distingue il testo dal codice

    

      

      

        
app/pricing/page.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>
  );
}

      

      
Il testo è stato tradotto. Testo JSX, valori letterali, costanti, alt, title, placeholder, aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Il codice rimane invariato. Nomi delle classi, URL, logica.

      
translate="no"
Decidi tu. Puoi lasciare qualsiasi elemento così com’è oppure utilizzare l’attributo `data-weglot-skip`.

    

  











  

    
// for your team

    
Modifica e revisione senza intervenire sul codice

    

      

      

        
my-next-app › Tedesco2 da recensire

        
FonteTedescoStato

        
Save changesÄnderungen speichernRevisionato

        
Start your free trialKostenlos testenModifica

        
Cancel anytime.Jederzeit kündbar.Per riepilogare

        
Choose your planWählen Sie Ihren TarifPer riepilogare

      

      
Recensione su Weglot. Il testo è stato revisionato dai responsabili del prodotto, del marketing e dai traduttori.

      
Edit saved · Kostenlos testen
No code change
Non inviare pull request solo per correggere una parola.

      
Tieni traccia di ciò che è stato rivisto. Visualizza i progressi per ciascuna lingua.

    

  









  

    
// fit

    
Quando usare " Weglot" e quando non farlo

    
Il pacchetto è in fase di anteprima. Ecco dove si colloca attualmente.

    

      
Router delle app Next.js
Supportato
Next.js 15 o 16.0.4+, React 19.

      
Vite
Supportato
React 19, Node 20.9+. Funziona anche Webpack.

      
Componenti server di React
Supportato
La modifica della lingua comporta l'aggiornamento dei componenti del server.

      
Contenuti CMS e API
Supportato
Con tDynamic nei componenti server di Next.js.

      
Modifiche da parte di utenti non sviluppatori
Supportato
Rivedi e modifica nella dashboard di Weglot .

      
Un URL per ogni lingua
Non ancora
La lingua è attualmente memorizzata in un cookie. Ora servono gli URL indicizzati per ciascuna lingua: usa next-intl o Paraglide JS.

      
Traduzioni sotto forma di file repo
Traduci azione
Weglot traduce i tuoi file JSON delle impostazioni locali in GitHub Actions e apre una pull request. Consulta la documentazione →

      
React 18, Pages Router
Non supportato
Anche Next.js 14 o versioni precedenti.

      
CMS o strumento per la creazione di siti web
Non questo pacchetto
Il tuo sito non è realizzato con React: utilizza le integrazioni CMS disponibili su Weglot.

    

  











  

    
// compare

    
Perché non una classica libreria i18n?

    
Le librerie i18n richiedono di sostituire ogni stringa con una chiave e di mantenere un file per ogni lingua. Weglot legge le stringhe che hai già scritto. Ecco un confronto tra le opzioni.


    
  










  

    
FAQ

    

      

        
Supporta la SEO: un URL per lingua e l'attributo hreflang?

        

          
Non oggi. La lingua del visitatore viene memorizzata in un cookie e ogni lingua viene fornita tramite gli stessi URL, quindi i motori di ricerca indicizzano solo la lingua di origine.

          
È possibile tradurre i titoli e le descrizioni delle pagine con tDynamicAll in generateMetadata. Se hai bisogno fin da subito di URL indicizzati per lingua, utilizza una libreria con routing basato sulle impostazioni locali, come next-intl o Paraglide JS.

        

      

      

        
Come posso tradurre i contenuti dinamici provenienti da un CMS, da un'API o dagli utenti?

        

          
Il plugin traduce solo il testo presente nel codice. Per i contenuti che il codice non rileva, chiama tDynamic, tDynamicAll oppure tDynamicHtml da @weglot/translate-react/dynamic nei componenti server di Next.js.

          
Se l'API impiega più di 500 ms o se un testo viene richiesto per la prima volta, restituisce il testo originale. La traduzione sarà disponibile alla richiesta successiva. Se si memorizzano i dati nella cache autonomamente, è opportuno che la cache dipenda dalla lingua del visitatore.

        

      

      

        
Next.js o Vite: cosa cambia?

        

          
Next.js utilizza withWeglot da @weglot/translate-react/next e WeglotProvider da @weglot/translate-react/react/next. Vite utilizza weglotPlugin da @weglot/translate-react/vite e WeglotProvider da @weglot/translate-react/react. Webpack utilizza weglotPlugin da @weglot/translate-react/webpack.

          
Le funzioni relative ai contenuti dinamici funzionano solo nei componenti server di Next.js.

        

      

      

        
Funziona con i React Server Components?

        
Sì, con l'App Router di Next.js. Importa WeglotProvider da @weglot/translate-react/react/next in modo che il cambio di lingua aggiorni i componenti del server. tDynamic, tDynamicAll e tDynamicHtml eseguiti lato server, nei componenti del server.

      

      

        
Cosa succede quando eseguo la compilazione?

        

          
Il plugin individua il testo nel codice JSX all'interno di sourceRoot e richiede all'API Weglot le traduzioni mancanti. Weglot le genera tramite un modello di linguaggio di grandi dimensioni (LLM), e la compilazione attende fino a translationTimeout (300 secondi per impostazione predefinita). Successivamente scrive public/translations/<locale>.json.

          
Se la traduzione non va a buon fine, la compilazione fallisce e il sistema conserva i dati ricevuti nella cache locale: eseguire nuovamente la compilazione per continuare. Con buildMode: "cache-only", la build non effettua alcuna chiamata di rete.

        

      

      

        
Dove vengono salvate le traduzioni?

        
Nel tuo progetto Weglot , dove puoi controllarle e modificarle. Ogni build conserva inoltre le traduzioni ricevute in <sourceRoot>/weglot/cache/<locale>.json. Inserisci quella cartella nella build senza richiamare l'API, oppure ignorala. public/translations/ viene generato e va in .gitignore.

      

      

        
Cosa viene tradotto e come posso escludere qualcosa?

        
Testo in JSX, stringhe letterali all’interno di espressioni JSX, stringhe lette da costanti e attributi quali title, alt, placeholder e aria-label. Il codice, gli URL, i nomi delle classi e le stringhe al di fuori di JSX rimangono invariati. Aggiungi translate="no" oppure data-weglot-skip per mantenere un elemento nella lingua originale. Dichiarare le proprie proprietà di testo con translatableAttributes.

      

    

  







  

    
Rendi la tua app React multilingue senza riscriverla

    
Installa il pacchetto, aggiungi la tua chiave API, compila.

    

      
terminale

      
$ npm install @weglot/translate-react

    

    

      
      Ottieni la tua chiave API
    

    
Preferisci farlo da solo? Leggi la documentazione o dai un’occhiata al pacchetto su npm