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

Esto abrirá tu navegador para la autenticación. Las nuevas organizaciones empiezan con el plan Sandbox: sin cuota base y pensado para hacer pruebas y evaluaciones.

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