What happens when I build?

El plugin busca el texto en el JSX dentro de «sourceRoot» y solicita a la API de Weglot las traducciones que faltan. Weglot las genera con un modelo de lenguaje grande (LLM), y la compilación espera hasta «translationTimeout» (300 segundos por defecto). A continuación, escribe en «public/translations/» .json. Si la traducción falla, la compilación falla y guarda lo que ha recibido en la caché local: vuelve a compilar para continuar. Con buildMode: "cache-only", la compilación no realiza ninguna conexión a Internet.

Where are the translations stored?

En tu proyecto « Weglot », donde las revisas y editas. Cada compilación también conserva las traducciones que ha recibido en /weglot/cache/ .json. Añade esa carpeta al control de versiones para compilar sin llamar a la API, o ignórala. La carpeta «public/translations/» se genera automáticamente y se incluye en el archivo .gitignore.

What gets translated, and how do I exclude something?

El texto en JSX, los literales de cadena dentro de expresiones JSX, las cadenas leídas desde constantes y atributos como «title», «alt», «placeholder» y «aria-label». El código, las URL, los nombres de clase y las cadenas fuera de JSX no se modifican. Añade «translate="no"» o «data-weglot-skip» para mantener un elemento en el idioma original. Declara tus propias propiedades de texto con «translatableAttributes».

@weglot/translate-react

Traduce tu
React, Next.js o Vite app

Q: Next.js or Vite: what changes?

Next.js usa «withWeglot» de @weglot/translate-react/next y «WeglotProvider» de @weglot/translate-react/react/next. Vite usa «weglotPlugin» de @weglot/translate-react/vite y «WeglotProvider» de @weglot/translate-react/react. Webpack usa «weglotPlugin» de @weglot/translate-react/webpack. Las funciones de contenido dinámico solo se ejecutan en los componentes de servidor de Next.js.

Q: Does it work with React Server Components?

Sí, con el App Router de Next.js. Importa WeglotProvider desde @weglot/translate-react/react/next para que, al cambiar de idioma, se actualicen tus componentes de servidor. tDynamic, tDynamicAll y tDynamicHtml se ejecutan en el lado del servidor, dentro de los componentes de servidor.

Sin envoltorios t(), sin archivos JSON. Añade un complemento de compilación y una clave de API de Weglot : el texto de tu JSX se traduce cuando se compila tu app, y tu equipo edita las traducciones en Weglot sin tener que tocar el código.

Consigue tu clave API

Copia el mensaje de la línea de comandos para · · · lee la documentación · ver en npm

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

// how it works

Cuatro pasos. Tus componentes se quedan tal y como están.

Los idiomas de origen y de destino provienen de tu proyecto de Weglot , no de tu código. El complemento lee el texto de tu JSX en el momento de la compilación y recupera sus traducciones.

Instala el paquete y añade tu clave API

Crea un proyecto de « Weglot » 2.0 y, a continuación, copia la clave API desde la configuración del proyecto. Empieza por pk_. Mantén .env fuera del control de versiones.
terminal · .env
```
$ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key
```

Añade el complemento

Envuelve tu configuración de Next.js con withWeglot. Punto sourceRoot a la carpeta donde tienes tus páginas y componentes.

Añadir weglotPlugin en tu configuración de Vite. Con Webpack, impórtalo desde @weglot/translate-react/webpack en cambio.

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

Añade el proveedor

Envuelve tu diseño raíz con WeglotProvider desde el punto de entrada de Next.js, para que al cambiar de idioma se actualicen tus componentes de servidor.

Envuelve tu app con WeglotProvider, lo antes posible.

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 y distribuye en todos los idiomas de tu proyecto

Cada compilación descarga las traducciones que faltan de Weglot y guarda public/translations/<locale>.json. No hagas caso a esa carpeta. Añade un selector de idioma con LocaleSwitcher o useWeglotContext.
.gitignore
```
public/translations/
```

// compare

¿Por qué no una biblioteca clásica de i18n?

Las bibliotecas de i18n te piden que sustituyas cada cadena por una clave y que mantengas un archivo por idioma. Weglot lee las cadenas que ya has escrito. Aquí tienes una comparación de las opciones.

Basado en la documentación pública de cada proyecto (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), noviembre de 2026.
Criterios	Weglot `@weglot/translate-react`	next-intl / i18next	Paraglide JS	Localización nativa de CMS
Envuelve las cadenas en funciones `t()` o de mensajes	Notext en JSX se detecta durante la compilación.	Sí`t("key")` para cada cadena.	Sí`m.key()` funciones de mensajes.	Solo contenidoLas cadenas de tu código siguen necesitando una biblioteca.
Archivos de traducción por idioma	No hay que mantener nadaSe genera al compilar, ignorado por Git.	SíNormalmente, un archivo JSON por configuración regional.	SíUn archivo de mensajes por configuración regional.	Noalmacenado en el CMS.
Redirigir en varios idiomas y SEO (URL por idioma, hreflang)	Todavía noEl idioma se guarda en una cookie. Las mismas URL para todos los idiomas; el idioma de origen está indexado.	next-intl: síEnrutamiento por configuración regional integrado. i18next: a través de la configuración de tu framework.	SíURL localizadas integradas: prefijos de configuración regional, rutas traducidas o dominios. Añade tú mismo las etiquetas hreflang.	Front-endUn CMS sin interfaz almacena el contenido por configuración regional. Las URL y los atributos hreflang provienen de tu interfaz de usuario.
Traducciones generadas para ti	SíWeglot se traduce con un LLM durante la compilación.	NoTrae tus propias traducciones o un sistema de gestión de traducciones (TMS).	Con herramientasla traducción automática de inlang CLI o tu agente de programación.	Complemento de pagoTraducción con IA en los planes de pago: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Editar traducciones sin necesidad de un desarrollador	SíRevísalo y edítalo en el panel de control de Weglot .	NoEdita los archivos JSON ni añadas un TMS aparte.	Con Finkel editor web de inlang, con una cuenta de GitHub.	SíEn el editor del CMS.
Creado por un agente de programación en una sola instrucción	SíUna instalación, dos cambios en la configuración. A continuación tienes el comando para copiar.	Tarea largaEl agente convierte cada cadena en claves y archivos.	Una tarea larga`init` si se ejecuta sin solicitar agentes, entonces cada cadena se convierte en un `m.key()` mensaje.	n/aSe configura en el CMS.

// built for coding agents

Diseñado para agentes de programación de IA

Si desarrollas con Claude Code, Cursor o Codex, tu agente puede añadir « Weglot » por sí solo. No hay que reescribir ninguna cadena, así que el cambio es pequeño y fácil de revisar.

01 · configuración

El agente lo instala y lo configura

Uno npm install, un plugin, un proveedor, una línea en .gitignore. El agente solo te pide la clave API.

02 · documentos

Documentos que los modelos de lenguaje grande (LLM) pueden leer

La documentación tiene un llms.txt índice, y cada página tiene una versión en Markdown: añade .md a su URL.

03 · indicación

Una frase lista para copiar

Cada paso de las instrucciones coincide con la guía de inicio, con las rutas de importación reales. Pégalo aquí abajo.

Pega el código de Claude

Pegar en el cursor (modo Agente)

Pegar en Codex

Ejecútalo en tu app

$ npm install @weglot/translate-react

// for your team

Edita y revisa sin tocar el código

Todas las traducciones aparecen en tu proyecto de Weglot . Los equipos de producto, marketing y los traductores revisan y editan el texto allí mismo, sin necesidad de abrir una solicitud de incorporación de cambios.

Revisa las traducciones que genera Weglot para tu app.
Edita cualquier traducción en el panel de control de Weglot .
Excluir cualquier cosa del código con translate="no" o data-weglot-skip.

// fit

Cuándo usar « Weglot » y cuándo no

El paquete está en fase de vista previa. Aquí es donde encaja ahora mismo.

Usa @weglot/translate-react si

Tu app utiliza React 19 con Next.js (App Router) o Vite.
No te conviene poner las cadenas entre paréntesis (t()) ni tener un archivo por cada idioma.
Tu programador escribe la mayor parte del código y quieres que la traducción vaya a su ritmo.
Las personas que no saben programar tienen que revisar y editar las traducciones.
El texto de tu interfaz de usuario está en el código, mientras que el contenido del CMS lo puedes traducir del lado del servidor.

Usa otra cosa si

Necesitas una URL por idioma y que los motores de búsqueda indexen ya las páginas traducidas. Usa next-intl o Paraglide JS.
Quieres que las traducciones estén en forma de archivos en tu repositorio y que se revisen en pull requests. Usa inlang con Paraglide JS o i18next.
Tu aplicación utiliza React 18, el enrutador de páginas de Next.js o Next.js 14 o una versión anterior.
Tu página web está creada con un CMS o un creador de páginas web, no con React. Usa las integraciones con CMS de Weglot.

Preguntas frecuentes

¿Funciona bien con el SEO: una URL por idioma y hreflang?

Hoy no. El idioma del visitante se guarda en una cookie y todos los idiomas se muestran en las mismas URL, así que los motores de búsqueda solo indexan el idioma de origen.

Puedes traducir los títulos y las descripciones de las páginas con tDynamicAll en generateMetadata. Si ahora mismo necesitas URL indexadas por idioma, usa una biblioteca con enrutamiento por configuración regional, como next-intl o Paraglide JS.

¿Cómo traduzco contenido dinámico procedente de un CMS, una API o de los usuarios?

El plugin solo traduce el texto que aparece en tu código. Para el contenido al que tu código nunca tiene acceso, llama a tDynamic, tDynamicAll o tDynamicHtml de @weglot/translate-react/dynamic en los componentes de servidor de Next.js.

Si la API tarda más de 500 ms, o si se solicita un texto por primera vez, devuelven el texto original. La traducción estará lista en una solicitud posterior. Si almacenas los datos en caché tú mismo, haz que la caché dependa del idioma del visitante.

Next.js o Vite: ¿qué cambia?

Next.js utiliza withWeglot de @weglot/translate-react/next y WeglotProvider de @weglot/translate-react/react/next. Vite utiliza weglotPlugin de @weglot/translate-react/vite y WeglotProvider de @weglot/translate-react/react. Webpack utiliza weglotPlugin de @weglot/translate-react/webpack.

Las funciones de contenido dinámico solo se ejecutan en los componentes de servidor de Next.js.

¿Funciona con los componentes de servidor de React?

Sí, con el App Router de Next.js. Importa WeglotProvider de @weglot/translate-react/react/next para que, al cambiar de idioma, se actualicen los componentes de tu servidor. tDynamic, tDynamicAll y tDynamicHtml se ejecutan en el lado del servidor, en los componentes del servidor.

¿Qué pasa cuando compilo?

El plugin busca el texto en el JSX dentro de sourceRoot y solicita a la API de Weglot las traducciones que le faltan. Weglot las genera con un modelo de lenguaje grande (LLM), y la compilación espera hasta translationTimeout (300 segundos por defecto). A continuación, escribe public/translations/<locale>.json.

Si la traducción falla, la compilación falla y guarda lo que ha recibido en la caché local: vuelve a compilar para continuar. Con buildMode: "cache-only", la compilación no realiza ninguna llamada de red.

¿Dónde se guardan las traducciones?

En tu proyecto « Weglot », donde las revisas y editas. Cada compilación también conserva las traducciones que ha recibido en <sourceRoot>/weglot/cache/<locale>.json. Incorpora esa carpeta a la compilación sin llamar a la API, o ignórala. public/translations/ se genera y va a .gitignore.

¿Qué es lo que se traduce y cómo puedo excluir algo?

Texto en JSX, literales de cadena dentro de expresiones JSX, cadenas leídas de constantes y atributos como title, alt, placeholder y aria-label. El código, las URL, los nombres de clases y las cadenas que no estén dentro de JSX no se modifican. Añade translate="no" o data-weglot-skip para mantener un elemento en el idioma original. Declara tus propios atributos de texto con translatableAttributes.

Haz que tu app de React sea multilingüe sin tener que reescribirla

Instala el paquete, añade tu clave API y compila.

terminal

$ npm install @weglot/translate-react