Traduce aplicaciones React y Next.js sin librerías de i18n

Cuándo Lingvit es la opción adecuada para React

• ✓Tienes una aplicación existente y no quieres refactorizar cada componente
• ✓Necesitas traducciones en producción rápido: días, no semanas
• ✓Miembros no técnicos del equipo necesitan revisar y editar traducciones
• ✓Tu contenido cambia con frecuencia y no quieres un ciclo de despliegue por cada actualización de traducción

Si necesitas layouts RTL profundamente integrados, formato de moneda o números según la configuración regional, o claves de traducción con seguridad de tipos en tiempo de compilación, una librería de i18n completa sigue siendo la herramienta adecuada. Lingvit está pensado para ser multilingüe rápido.

Next.js App Router

Usa el componente Script integrado de Next.js constrategy="afterInteractive"para cargar Lingvit después de la hidratación:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.lingvit.com/widget/v1/widget.bundle.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

El MutationObserver de Lingvit detecta el contenido renderizado después de la hidratación, por lo que los componentes cargados dinámicamente, las transiciones de ruta y las secciones con carga diferida se traducen todas.

Vite / Create React App

Para proyectos Vite o CRA, añade la etiqueta de script a tu index.html raíz:

<!-- index.html (Vite / CRA) -->
<body>
  <div id="root"></div>
  <script src="https://cdn.lingvit.com/widget/v1/widget.bundle.js" async></script>
</body>