Compilador de Lingo.dev

Compilador de Lingo.dev es un sistema de traducción gratuito y de código abierto que funciona en tiempo de compilación y hace que las aplicaciones React sean multilingües sin modificar tus componentes.

Para ver el compilador en acción, consulta esta demostración en vivo: https://x.com/MaxPrilutskiy/status/1929946504216932746

Ejemplo rápido

Antes de añadir el compilador:

export function Welcome() {
  return <h1>Welcome to our app</h1>;
}

Después de añadir el compilador (no se necesitan cambios en el código):

// Same code - translations injected automatically at build time
export function Welcome() {
  return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish

Cómo funciona

El compilador detecta automáticamente el texto traducible en tu JSX, genera traducciones con inteligencia artificial y las inyecta en tiempo de compilación. Tu código fuente permanece sin cambios: las traducciones ocurren de forma transparente durante el proceso de compilación.

Principio clave: las traducciones se determinan en tiempo de compilación, creando bundles optimizados con solo las traducciones que necesitas. Esto significa tiempos de carga más rápidos, bundles más pequeños y mejor SEO.

En qué se diferencia

A diferencia de las bibliotecas de traducción en tiempo de ejecución (i18next, react-intl), el compilador de Lingo.dev:

  • Funciona en tiempo de compilación, no en tiempo de ejecución
  • No requiere gestión manual de claves de traducción
  • Genera traducciones automáticamente usando IA
  • Crea cero sobrecarga en tiempo de ejecución
  • Mantiene tu código React limpio: sin llamadas a funciones t()

Características principales

  • Automático por defecto - No se requiere directiva "use i18n" (opcional si deseas comportamiento opt-in)
  • Cero sobrecarga en tiempo de ejecución - Las traducciones están precompiladas en tu build
  • Modos de compilación - Usa pseudotranslator en desarrollo, traducciones reales en CI, solo caché en producción
  • Type-safe - Soporte completo de TypeScript con generación automática de tipos
  • Sobrescrituras manuales - Usa el atributo data-lingo-override para control preciso sobre traducciones específicas
  • Resolvers de locale personalizados - Implementa tu propia lógica de detección y persistencia de locale
  • Pluralización automática - Soporte de ICU MessageFormat para formas plurales
  • Widget de desarrollo - Editor de traducciones en el navegador para edición en tiempo real

Frameworks compatibles

  • Next.js (App Router con React Server Components)
  • Vite + React (SPA y SSR)

Más frameworks próximamente.

Preguntas frecuentes

¿Necesito API keys en producción? No. Usa buildMode: "cache-only" en producción: las traducciones se generan previamente en CI, no se necesitan llamadas a la API.

¿Puedo controlar qué archivos se traducen? Sí. Configura useDirective: true para requerir la directiva 'use i18n' al inicio de los archivos que deseas traducir. Por defecto es automático (todos los archivos).

¿Qué pasa si la traducción de la IA es incorrecta? Usa el atributo data-lingo-override para especificar traducciones exactas para locales específicos. Funciona con cualquier elemento JSX.

¿Cómo pruebo sin llamadas a la API? Activa usePseudotranslator: true en desarrollo: genera traducciones falsas al instante para que puedas ver qué se traduce sin costos de API.

Próximos pasos