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

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


# .env.local

GROQ_API_KEY=gsk_...

Paso 4. Añadir el 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 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: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>Welcome to our app</h1>
      <p>This content is automatically translated</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>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</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 "Add translations"

  3. Despliega utilizando 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