Inicio rápido

Lingo.dev Compiler está diseñado para hacer que cualquier aplicación React sea multilingüe durante la 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, habrás:

  1. Instalado y configurado Lingo.dev Compiler en tu aplicación React
  2. Configurado la extracción e inyección automática de traducciones
  3. Obtenido 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: {
    "*:*": "groq:mistral-saba-24b",
  },
})(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Paso 3. Configurar la autenticación

Lingo.dev Compiler utiliza GROQ para traducciones potenciadas por IA. Crea una cuenta gratuita en groq.com y obtén tu clave API.

Añade tu clave API a tu entorno:


# .env

GROQ_API_KEY=gsk_...

Paso 4. Añadir el proveedor

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 de 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 los 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