Primeros pasos - Lingo.dev

Alpha

Lingo.dev Compiler está en fase alpha. Es inestable, no se recomienda para entornos de producción y las API pueden cambiar entre versiones.

Añade soporte multilingüe a tu aplicación React en menos de 5 minutos.

Requisitos previos

Node.js 18+ y una aplicación React que use Next.js (App Router) o Vite.

Instala#

bash

pnpm install @lingo.dev/compiler

Configura tu framework#

Haz que tu configuración sea asíncrona y envuélvela con withLingo:

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

Añade LingoProvider#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Autentícate#

bash

npx @lingo.dev/cli login

Se abrirá el navegador para completar la autenticación. El plan gratuito Hobby es suficiente para la mayoría de los proyectos.

Si la autenticación en el navegador está bloqueada, añade la clave a .env manualmente:

bash

LINGODOTDEV_API_KEY=your_key_here

Inicia el servidor de desarrollo#

bash

npm run dev

El Compiler analiza tu JSX, genera seudotraducciones (traducciones simuladas instantáneas para visualizar qué se traduce) y las inyecta en tus componentes. Los metadatos se guardan en .lingo/metadata.json; añádelo al control de versiones.

Añade un selector de idioma (opcional)#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Genera traducciones reales#

Cuando estés listo, desactiva el pseudotraductor:

{
  dev: {
    usePseudotranslator: false,
  }
}

Reinicia el servidor de desarrollo. El Compiler genera traducciones reales con IA para el texto nuevo o modificado.

Siguientes pasos#

Cómo funciona

El pipeline de transformación en tiempo de compilación

Next.js

Configuración y funciones específicas de Next.js

Vite + React

Configuración y funciones específicas de Vite

Referencia de configuración

Todas las opciones de configuración