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

Crea una cuenta gratuita en groq.com y añade tu clave API:


# .env

GROQ_API_KEY=gsk_...

Paso 4. Añadir el 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 potenciadas por 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 basado en las preferencias del usuario o patrones de URL.

Siguientes pasos