@weglot/translate-react

Traduce tu
React, Next.js o Vite app

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

// what your users see

El JSX que has escrito, en todos los idiomas

Escribe el texto una vez. Weglot lo traduce en el momento de la compilación.

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

El mismo botón, cinco idiomas. Anchos medidos en tiempo real.

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

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

Sin claves, sin t(). Escribe el texto en JSX, y ya está.

0Llamadas a t() para sumar
0archivos de traducción que hay que mantener
1npm install
2modificaciones en el código: plugin y proveedor

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

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

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

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

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

// under the hood

¿Qué pasa cuando construyes?

  1. 01Leetu JSX
  2. 02Envíaun nuevo mensaje
  3. 03 «Weglot » se traduce como
  4. 04 Creaun archivo por cada idioma

// every language of your project

Una única compilación, todos los idiomas que añadas

Elige los idiomas en Weglot. La próxima versión los incluirá.

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

Añade un idioma en Weglot y, a continuación, compila. Los archivos de traducción se implementarán junto con tu aplicación.

// built for coding agents

Tu agente se encarga de todo

No hay que reescribir ninguna cadena, así que el cambio es pequeño y fácil de revisar.

Cualquier agente de programación. Pega una instrucción en el agente que ya usas.

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

Los agentes de Docs pueden leerlo. Un índice llms.txt y un archivo Markdown para cada página.

✓Instala el paquetepackage.json
✓Añade el complementonext.config.ts
✓Añade el proveedorlayout.tsx
✓Ignora los archivos generados.gitignore
?Te pide tu clave de API.env

Un diff que puedes revisar. No se ha reescrito ninguna cadena.

Pega el código de Claude

      

      
      
      
    

  

        

        
Copia el mensaje. Sigue los mismos pasos que en la guía de inicio.

      

    

  










  

    
// what gets translated

    
El plugin distingue el texto del código

    

      

      

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

      

      
El texto está traducido. Texto JSX, literales, constantes, alt, title, placeholder, aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
El código se deja tal cual. Nombres de clases, URL, lógica.

      
translate="no"
Tú decides. Puedes dejar cualquier elemento tal cual o usar «data-weglot-skip».

    

  











  

    
// for your team

    
Edita y revisa sin tocar el código

    

      

      

        
my-next-app › Alemán2 para revisar

        
FuenteAlemánEstado

        
Save changesÄnderungen speichernRevisado

        
Start your free trialKostenlos testenEdición

        
Cancel anytime.Jederzeit kündbar.Para repasar

        
Choose your planWählen Sie Ihren TarifPara repasar

      

      
Revisión en Weglot. Los equipos de producto, marketing y traducción revisan el texto.

      
Edit saved · Kostenlos testen
No code change
No se aceptan pull requests para corregir una palabra.

      
Lleva un control de lo que se ha revisado. Consulta el progreso de cada idioma.

    

  









  

    
// fit

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

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

    

      
Enrutador de aplicaciones de Next.js
Compatible
Next.js 15 o 16.0.4 o superior, React 19.

      
Vite
Compatible
React 19, Node 20.9 o superior. Webpack también funciona.

      
Componentes de servidor de React
Compatible
Al cambiar de idioma, se actualizan los componentes de tu servidor.

      
Contenido de CMS y API
Compatible
Con tDynamic en los componentes de servidor de Next.js.

      
Edición por parte de personas que no son desarrolladores
Compatible
Revísalo y edítalo en el panel de control de Weglot .

      
Una URL por idioma
Todavía no
Hoy en día, el idioma se guarda en una cookie. Ahora necesitas URL indexadas por idioma: usa next-intl o Paraglide JS.

      
Traducciones en forma de archivos repo
Acción de traducción
Weglot traduce tus archivos JSON de configuración regional en GitHub Actions y abre una solicitud de incorporación de cambios. Consulta la documentación →

      
React 18, enrutador de páginas
No es compatible
También Next.js 14 o versiones anteriores.

      
CMS o creador de páginas web
Este paquete no
Tu página web no está hecha con React: usa las integraciones con CMS de Weglot.

    

  











  

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


    
  










  

    
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

    

    

      
      Consigue tu clave API
    

    
¿Prefieres hacerlo tú mismo? Lee la documentación o echa un vistazo al paquete en npm