Integración con Next.js

Lingo.dev Compiler se integra perfectamente con Next.js App Router para proporcionar localización en tiempo de compilación sin modificar tus componentes de React.

Sigue estos pasos para añadir soporte multilingüe a tu aplicación Next.js.

O explora el proyecto demo de Next.js para probar el Compiler en acción.

Requisitos previos

  • Next.js 13+ con App Router
  • React 18+
  • Node.js 18 o superior

Paso 1. Instalar el paquete

Instala el paquete lingo.dev:

npm install lingo.dev

Paso 2. Configurar Next.js

Importa y configura el compilador en tu archivo next.config.js:

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Tu configuración existente de Next.js
};

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
})(nextConfig);

Paso 3. Configurar la autenticación

Lingo.dev Compiler envía tu contenido a motores de traducción de IA para la 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.local:


# .env.local

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.local:


# .env.local

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

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

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

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

Paso 5. Opcional: Añadir selector de idioma

Crea un componente selector 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. Escaneará tus componentes React para encontrar contenido traducible
  2. Extraerá claves de traducción
  3. Generará traducciones potenciadas por IA
  4. Creará archivos de traducción optimizados en el directorio lingo/

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

Opciones de configuración

Puedes personalizar el comportamiento del compilador:

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // Predeterminado para Next.js
  lingoDir: "lingo", // Directorio de archivos de traducción
  rsc: true, // Habilitar soporte para React Server Components
  debug: false, // Habilitar registro de depuración
})(nextConfig);

Componentes de servidor y cliente

Lingo.dev Compiler funciona tanto con componentes de servidor como de cliente:

Componentes de servidor

Los componentes de servidor se procesan durante la compilación con soporte completo de traducción:

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <h1>Bienvenido a nuestra aplicación</h1>
      <p>Este contenido se traduce automáticamente</p>
    </div>
  );
}

Componentes de cliente

Los componentes de cliente reciben paquetes de traducción optimizados:

"use client";

import { useState } from "react";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>Haz clic aquí</button>
    </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 "Añadir traducciones"

  3. Despliega usando tu plataforma preferida (Vercel, Netlify, etc.)

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

Próximos pasos