Does it work with React Server Components?

Sì, con Next.js App Router. Importa WeglotProvider da @weglot/translate-react/react/next in modo che, quando cambi la lingua, i componenti server vengano aggiornati. tDynamic, tDynamicAll e tDynamicHtml vengono eseguiti lato server, all’interno dei componenti server.

What happens when I build?

Il plugin individua il testo nel codice JSX all'interno della directory 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 al raggiungimento del tempo massimo di traduzione (translationTimeout), impostato di default a 300 secondi. Successivamente, scrive i file nella directory public/translations/ .json. Se la conversione non va a buon fine, la compilazione fallisce e il contenuto ricevuto viene conservato nella cache locale: per continuare, è necessario eseguire nuovamente la compilazione. Con buildMode: "cache-only", la compilazione non effettua alcuna richiesta di rete.

Where are the translations stored?

Nel tuo progetto Weglot , dove puoi controllarle e modificarle. Ogni build conserva inoltre le traduzioni ricevute in /weglot/cache/ .json. Esegui il commit di quella cartella per la compilazione senza richiamare l'API, oppure ignorala. La cartella public/translations/ viene generata e va inserita nel file .gitignore.

What gets translated, and how do I exclude something?

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 non vengono modificati. Aggiungi translate="no" o data-weglot-skip per mantenere un elemento nella lingua originale. Dichiarate le vostre proprietà di testo personalizzate con translatableAttributes.

@weglot/translate-react

Traduci il tuo
Reagisci, Next.js oppure Vite app

Q: Next.js or Vite: what changes?

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.

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

Richiede React 19 Next.js 15 / 16.0.4+ (App Router) o Vite Node 20.9+

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

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

Aggiungi il plugin

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

Aggiungi weglotPlugin nella configurazione di Vite. Con Webpack, importalo da @weglot/translate-react/webpack invece.

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" });
}

vite.config.ts

import { defineConfig } from "vite";
import { weglotPlugin } from "@weglot/translate-react/vite";

export default defineConfig({
  plugins: [weglotPlugin({ sourceRoot: "src" })],
});

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.

Incorpora la tua app con WeglotProvider, il prima possibile.

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>
  );
}

src/main.tsx

import { WeglotProvider } from "@weglot/translate-react/react";

root.render(
  <WeglotProvider>
    <App />
  </WeglotProvider>,
);

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

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

Sulla base della documentazione pubblica di ciascun progetto (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), novembre 2026.
Criteri	Weglot `@weglot/translate-react`	next-intl / i18next	Paraglide JS	Localizzazione nativa CMS
Racchiudere le stringhe nelle funzioni t() o nelle funzioni di messaggio	NoIl testo in JSX viene rilevato in fase di compilazione.	Sì`t("key")` per ogni stringa.	Sì`m.key()` funzioni di messaggistica.	Solo contenutoLe stringhe nel tuo codice richiedono comunque una libreria.
File di traduzione per lingua	Nessuno da gestireGenerato durante la compilazione, ignorato da Git.	SìIn genere un file JSON per ogni lingua.	SìUn file di messaggi per ogni impostazione locale.	Nomemorizzati nel CMS.
Routing multilingue e SEO (URL per lingua, hreflang)	Non ancoraLingua memorizzata in un cookie. Stessi URL per tutte le lingue, lingua di origine indicizzata.	next-intl: sìRouting locale integrato. i18next: tramite la configurazione del framework.	SìURL localizzati integrati: prefissi di lingua, percorsi tradotti o domini. Aggiungi tu stesso i tag hreflang.	Front-endUn CMS headless memorizza i contenuti in base alla lingua. Gli URL e gli attributi hreflang provengono dal front-end.
Traduzioni generate per te	SìWeglot viene tradotto con un modello LLM durante la compilazione.	NoPorta le tue traduzioni o un sistema di gestione delle traduzioni (TMS).	Con gli strumentila traduzione automatica via CLI di inlang o il tuo agente di programmazione.	Componenti aggiuntivi a pagamentoTraduzione tramite IA nei piani a pagamento: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Modifica le traduzioni senza l'aiuto di uno sviluppatore	SìControlla e modifica nella dashboard di Weglot .	NoModifica i file JSON oppure aggiungi un TMS separato.	Con Finkl'editor web di inlang, con un account GitHub.	SìNell'editor CMS.
Creato da un agente di programmazione in un unico prompt	SìUna sola installazione, due modifiche alla configurazione. Di seguito il prompt da copiare.	Attività lungaL'agente riscrive ogni stringa in chiavi e file.	Attività lunga`init` funziona senza richiedere l'inserimento di agenti, quindi ogni stringa diventa un `m.key()` messaggio.	n/aConfigurato nel CMS.

// built for coding agents

Progettato per agenti di programmazione basati sull'intelligenza artificiale

Se utilizzi Claude Code, Cursor o Codex, il tuo agente può aggiungere autonomamente Weglot . Non è necessario riscrivere alcuna stringa, quindi la modifica è minima e facile da verificare.

01 · configurazione

L'agente lo installa e lo configura

Uno npm install, un plugin, un provider, una riga in .gitignore. L'agente ti chiede solo la chiave API.

02 · documenti

Documenti che i modelli di linguaggio di grandi dimensioni (LLM) sono in grado di leggere

La documentazione contiene un llms.txt indice, e ogni pagina ha una versione in Markdown: aggiungi .md al suo URL.

03 · prompt

Un prompt pronto per essere copiato

Ogni passaggio della procedura corrisponde alla guida introduttiva, con i percorsi di importazione effettivi. Copialo qui sotto.

Incolla nel Claude Code

Incolla in corrispondenza del cursore (modalità Agente)

Incolla nel Codex

Esegui nell'app

$ npm install @weglot/translate-react

// for your team

Modifica e revisione senza intervenire sul codice

Ogni traduzione viene inserita nel tuo progetto su Weglot . I responsabili di prodotto, del marketing e i traduttori possono rivedere e modificare il testo direttamente lì, senza dover aprire una pull request.

Controlla le traduzioni generate da Weglot per la tua app.
Modifica qualsiasi traduzione nella dashboard di Weglot .
Escludi qualsiasi cosa dal codice con translate="no" oppure data-weglot-skip.

// fit

Quando usare " Weglot" e quando non farlo

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

Utilizza @weglot/translate-react se

La tua app utilizza React 19 su Next.js (App Router) o Vite.
Non è consigliabile racchiudere le stringhe tra t() né mantenere un file per ogni lingua.
Il tuo agente di programmazione scrive la maggior parte del codice e tu vuoi che la traduzione riesca a stare al passo.
Le persone che non scrivono codice devono rivedere e modificare le traduzioni.
Il testo dell'interfaccia utente è contenuto nel codice, mentre i contenuti del CMS possono essere tradotti lato server.

Usa qualcos’altro se

Oggi è necessario disporre di un URL per ogni lingua e di pagine tradotte indicizzate dai motori di ricerca. Utilizza next-intl o Paraglide JS.
Se desideri che le traduzioni siano disponibili come file nel tuo repository e vengano revisionate tramite pull request, utilizza inlang insieme a Paraglide JS o i18next.
La tua app utilizza React 18, il Pages Router di Next.js oppure Next.js 14 o versioni precedenti.
Il tuo sito è stato realizzato con un CMS o un website builder, non con React. Utilizza le integrazioni CMS disponibili su Weglot.

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