Next.js

Integra i1n con Next.js usando next-intl o el SDK de i1n directamente.

Configuración

Ejecuta i1n init en tu proyecto Next.js. La CLI detecta automáticamente next-intl si está presente y configura el formato JSON anidado en tu directorio locales/.

i1n funciona tanto con el App Router como con el Pages Router. Puedes usar el SDK de i1n en modo independiente o conectarlo a next-intl a través del Modo Bridge.

Modo Independiente

Importe init y t de i1n, cargue sus recursos de traducción y utilice t() directamente en sus componentes. El archivo i1n.d.ts generado automáticamente proporciona seguridad de tipo completa y autocompletado en el IDE.

Este enfoque reemplaza completamente a next-intl. Usa init() para cargar recursos y setLocale() para cambiar de idioma. No se requiere ninguna biblioteca i18n adicional.

Modo puente con next-intl

Si tu proyecto ya usa next-intl, conéctalo a i1n con una sola línea: registerI1n((key, params) => nextIntlT(key, params)). Esto preserva tu configuración existente de next-intl mientras agrega el autocompletado seguro de tipos de i1n.

i1n administra los archivos de traducción, la traducción con IA y la generación de tipos. next-intl continúa manejando la carga en tiempo de ejecución, los componentes del servidor y el enrutamiento. Obtienes los beneficios de ambos sistemas sin costo de migración.

Despliegue

Agregá i1n pull a tu paso de compilación o pipeline de CI/CD para asegurar que las traducciones estén siempre sincronizadas antes del despliegue.

La generación de sitios estáticos (SSG) y el renderizado del lado del servidor (SSR) de Next.js funcionan a la perfección con los archivos de traducción gestionados por i1n.

app/[locale]/page.tsx

import { t } from 'i1n'

export default function HomePage() {
  return (
    <main>
      <h1>{t('home.title')}</h1>
      <p>{t('home.subtitle')}</p>
    </main>
  )
}

Bridge Mode — src/i18n.ts

import { registerI1n } from 'i1n'
import { useTranslations } from 'next-intl'

const t = useTranslations()
registerI1n((key, params) => t(key, params))

Relacionado

Panel

Guía del panel web de i1n: creación de cuentas, organizaciones, claves de API, edición de traducciones y gestión de equipos.

Modo Puente

Conservá tu biblioteca i18n existente mientras agregás el autocompletado con seguridad de tipos, la traducción con IA y la gestión de archivos de i1n.