"use i18n";

La directiva "use i18n" permite la localización archivo por archivo de componentes React sin necesidad de refactorizar tu código existente. Al igual que "use client" o "use server", simplemente agrégala en la parte superior de tu archivo para localizar automáticamente todo el contenido traducible en ese componente.

Este enfoque es perfecto para añadir gradualmente soporte multilingüe a bases de código grandes con un riesgo mínimo y una flexibilidad máxima.

Cómo funciona

Cuando añades "use i18n" en la parte superior de un archivo React, el Compilador Lingo.dev automáticamente:

  1. Escanea el archivo completo en busca de contenido traducible
  2. Extrae texto JSX y atributos traducibles
  3. Genera traducciones utilizando tu modelo de IA configurado
  4. Inyecta versiones localizadas durante la compilación
  5. Mantiene la Sustitución de Módulos en Caliente para un desarrollo fluido

La directiva funciona a nivel de archivo, procesando todo dentro de los límites de ese componente mientras deja el resto de tu aplicación sin cambios.

Habilitar la directiva

Para usar la directiva "use i18n", habilítala en tu configuración del compilador:

{
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  useDirective: true, // Habilitar directiva "use i18n"
  models: "lingo.dev", // Opción 1: Motor Lingo.dev
  // models: {
  //   "*:*": "groq:mistral-saba-24b", // Opción 2: GROQ
  // }
}

Nota: Cuando useDirective está configurado como false (por defecto), el Compilador Lingo.dev procesa todos los archivos como si tuvieran "use i18n" en la parte superior. Configurar useDirective: true te da control granular para localizar archivos individualmente.

Configuración de modelos: Puedes usar el Motor Lingo.dev con sintaxis simplificada (models: "lingo.dev") o modelos GROQ con mapeo específico de modelos (models: { "*:*": "groq:mistral-saba-24b" }). El Motor selecciona automáticamente los modelos óptimos para cada par de idiomas.

Uso básico

Añade la directiva en la parte superior de cualquier archivo de componente React:

"use i18n";

import React from "react";

export function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our app!</h2>
      <p>
        Get started by exploring our features and discovering what makes our
        platform special.
      </p>
      <button>Get Started</button>
    </div>
  );
}

¡Eso es todo! El componente ahora se renderizará automáticamente en el idioma seleccionado por el usuario sin ningún cambio en el código.

Funciona con directivas existentes

La directiva "use i18n" funciona naturalmente junto con otras directivas de React que ya podrías estar utilizando:

"use client";
"use i18n";

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

  return (
    <div>
      <h1>Contador de clics</h1>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>¡Haz clic aquí!</button>
    </div>
  );
}

"use server";
"use i18n";

export async function ServerComponent() {
  const data = await fetchData();

  return (
    <div>
      <h1>Contenido renderizado en servidor</h1>
      <p>Este contenido se renderiza en el servidor y se localiza durante la compilación</p>
    </div>
  );
}

El compilador procesa inteligentemente todas las directivas en conjunto, manteniendo el comportamiento previsto de tus componentes mientras añade la localización.

Flujo de trabajo de desarrollo

1. Migración gradual

Comienza añadiendo la directiva a componentes individuales:

// Antes: Componente solo en inglés
export function Header() {
  return <h1>My Application</h1>;
}

// Después: Componente multilingüe con una sola línea
("use i18n");

export function Header() {
  return <h1>My Application</h1>;
}

2. Reemplazo de módulos en caliente (HMR)

La directiva funciona perfectamente con HMR. Cuando modificas texto en un componente con "use i18n", las traducciones se actualizan inmediatamente en tu navegador:

"use i18n";

export function StatusMessage() {
  return (
    <div>
      {/* Cambia este texto y verás cómo se actualiza en todos los idiomas instantáneamente */}
      <p>¡Tus cambios se han guardado correctamente!</p>
    </div>
  );
}

3. Enfoque archivo por archivo

Perfecto para bases de código grandes donde deseas localizar incrementalmente:

src/
├── components/
│   ├── Header.tsx          // ✅ "use i18n" - localizado
│   ├── Navigation.tsx      // ✅ "use i18n" - localizado
│   ├── ProductCard.tsx     // ✅ "use i18n" - localizado
│   ├── Footer.tsx          // ⏳ Aún no localizado
│   └── Sidebar.tsx         // ⏳ Aún no localizado

Beneficios

La directiva "use i18n" hace que la localización sea tan simple como añadir una sola línea a tus componentes de React, y está diseñada para proyectos maduros que requieren una localización gradual.

Próximos pasos