Inicio rápido

Lingo.dev Compiler está diseñado para hacer que cualquier aplicación React sea multilingüe durante el tiempo de compilación sin requerir cambios en los componentes React existentes.

Esta guía de inicio rápido te ayudará a añadir soporte multilingüe a tu aplicación React en menos de 5 minutos.

Al completar esta guía, podrás:

  1. Instalar y configurar Lingo.dev Compiler en tu aplicación React
  2. Configurar la extracción e inyección automatizada de traducciones
  3. Tener una aplicación multilingüe funcional con traducciones optimizadas

¡Comencemos!

Requisitos previos

Lingo.dev Compiler funciona con frameworks modernos de React. Antes de comenzar, asegúrate de tener una de las configuraciones compatibles:

  • Next.js (App Router)
  • React Router / Remix
  • Vite + React

O explora nuestras aplicaciones de demostración: Next.js, React Router, y Vite.

Paso 1. Instalar el paquete

Instala el paquete lingo.dev en tu proyecto:

npm install lingo.dev

Paso 2. Configurar tu framework

Elige tu framework y sigue la configuración específica:

Next.js

Actualiza tu next.config.js:

import lingoCompiler from "lingo.dev/compiler";

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev", // Opción 1: Motor Lingo.dev
  // models: {
  //   "*:*": "groq:mistral-saba-24b", // Opción 2: GROQ
  //   "*:*": "google:gemini-2.0-flash", // Opción 2: Google AI
  //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Opción 2: OpenRouter
  //   "*:*": "ollama:mistral-small3.1", // Opción 2: Ollama
  //   "*:*": "mistral:mistral-small-latest", // Mistral
  // },
})(nextConfig);

React Router / Remix

Actualiza tu vite.config.ts:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Opción 1: Motor Lingo.dev
    // models: {
    //   "*:*": "groq:mistral-saba-24b", // Opción 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Opción 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Opción 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Opción 2: Ollama
    // },
  })(viteConfig),
);

Vite

Actualiza tu vite.config.ts:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Opción 1: Motor Lingo.dev
    // models: {
    //   "*:*": "groq:mistral-saba-24b", // Opción 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Opción 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Opción 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Opción 2: Ollama
    //   "*:*": "mistral:mistral-small-latest", // Mistral
    // },
  })(viteConfig),
);

Paso 3. Configurar la autenticación

Lingo.dev Compiler envía tu contenido a motores de traducción de IA para localización, por lo que necesitamos autenticarnos primero.

Opción 1. Motor Lingo.dev

Lingo.dev Compiler puede utilizar el Motor Lingo.dev como tu motor de traducción por IA.

Proporciona selección dinámica de modelos, enrutamiento automático a diferentes modelos para cada par de idiomas, respaldos automáticos de modelos, memoria de traducción que considera traducciones anteriores y soporte de glosario para la terminología específica del dominio de tu proyecto. Hay opciones tanto gratuitas como de pago, y el nivel gratuito Hobby debería ser suficiente para la mayoría de los proyectos.

Para autenticarte, ejecuta:

npx lingo.dev@latest login

Detalle importante. Si estás utilizando el navegador Brave, o tus extensiones del navegador están bloqueando el flujo de autenticación, puedes autenticarte manualmente añadiendo una variable de entorno LINGODOTDEV_API_KEY a tu archivo .env:

LINGODOTDEV_API_KEY=...

Encontrarás el token en la Configuración del Proyecto del Motor Lingo.dev.

Opción 2. Proveedor LLM alternativo

Alternativamente, puedes utilizar modelos de uno de los proveedores de LLM compatibles:

Añade tu clave API para el proveedor de LLM configurado a tu entorno:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

Nota: Asegúrate de activar tu cuenta con el proveedor de LLM y aceptar sus Términos de servicio antes de utilizarlo en Compiler.

Paso 4. Añadir el Provider

Envuelve tu aplicación con el LingoProvider para habilitar las traducciones:

Next.js

En tu layout.tsx:

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function Layout({ children }) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

React Router / Remix

En tu root.tsx:

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";

export async function loader(args) {
  return { lingoDictionary: await loadDictionary(args.request) };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData();
  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Vite

En tu main.tsx:

import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")).render(
  <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
    <App />
  </LingoProviderWrapper>,
);

Paso 5. Compilar y probar

Ejecuta tu servidor de desarrollo:

npm run dev

El compilador automáticamente:

  1. Analizará tus componentes React para encontrar texto traducible
  2. Extraerá las claves de traducción
  3. Generará traducciones utilizando IA
  4. Creará archivos de traducción optimizados en el directorio lingo/

¡Tu aplicación ahora es multilingüe! El compilador crea diccionarios versionados que rastrean cambios de contenido y solo retraduce el contenido modificado.

Opcional: Añadir selector de idioma

Añade un selector de idioma para permitir a los usuarios cambiar de idioma:

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
    </header>
  );
}

Siguientes pasos