Integración con React Router / Remix

Lingo.dev Compiler funciona perfectamente con React Router y la última versión de Remix (que ahora es React Router v7) para proporcionar localización en tiempo de compilación.

Sigue estos pasos para añadir soporte multilingüe a tu aplicación de React Router o Remix.

O explora el proyecto de demostración de React Router / Remix para probar el Compiler en acción.

Requisitos previos

  • React Router v6+ o Remix
  • Vite como herramienta de construcción
  • React 18+
  • Node.js 18 o superior

Paso 1. Instalar el paquete

Instala el paquete lingo.dev:

npm install lingo.dev

Paso 2. Configurar Vite

Importa y configura el compilador en tu vite.config.ts:

import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // Tu configuración existente de Vite
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "app",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(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 necesitas autenticarte primero.

Opción 1. Motor de Lingo.dev

Lingo.dev Compiler puede utilizar el Motor de Lingo.dev como tu motor de traducción de IA. Proporciona selección dinámica de modelos, enrutamiento automático, memoria de traducción y soporte de glosario. Hay opciones gratuitas y de pago disponibles.

Para autenticarte, ejecuta:

npx lingo.dev@latest login

Si tienes problemas con el flujo del navegador, puedes añadir manualmente una clave LINGODOTDEV_API_KEY a tu archivo .env:


# .env

LINGODOTDEV_API_KEY=...

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

Opción 2. Proveedor LLM alternativo

Alternativamente, puedes utilizar modelos de proveedores de LLM compatibles:

Añade tu(s) clave(s) API a tu archivo .env:


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

Para React Router

Importa el proveedor en tu componente raíz (app/root.tsx):

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

// Para React Router con cargadores de datos
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Para Remix

Importa el proveedor en tu ruta raíz (app/root.tsx):

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

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

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}

Paso 5. Opcional: Añadir selector de idioma

Crea un componente para cambiar de idioma:

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

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

Paso 6. Compilar y probar

Inicia tu servidor de desarrollo:

npm run dev

El compilador automáticamente:

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

Visita http://localhost:5173 para ver tu aplicación multilingüe en funcionamiento.

Opciones de configuración

Puedes personalizar el comportamiento del compilador:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

Renderizado en el servidor

El compilador funciona tanto con renderizado del lado del cliente como del servidor:

Componentes del cliente

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This content is automatically translated</p>
    </div>
  );
}

Componentes de ruta

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company</p>
    </div>
  );
}

Despliegue en producción

  1. Compila tu aplicación:

    npm run build

  2. Confirma los archivos de traducción:

    git add lingo/
git commit -m "Add translations"

  3. Despliega usando tu plataforma preferida

Tu aplicación de React Router o Remix servirá contenido localizado automáticamente según las preferencias del usuario o los patrones de URL.

Siguientes pasos