Next.js

Integre i1n con Next.js utilizando next-intl o directamente el SDK de i1n.

Configuración

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

i1n funciona tanto con App Router como con Pages Router. Puede utilizar el SDK de i1n en modo independiente o conectarlo a next-intl mediante el modo puente (Bridge Mode).

Modo autónomo

Importe init y t desde 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 tipos completa y autocompletado en el IDE.

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

Modo puente con next-intl

Si su proyecto ya utiliza next-intl, conéctelo a i1n con una sola línea: registerI1n((key, params) => nextIntlT(key, params)). Esto preserva su configuración actual de next-intl mientras añade el autocompletado con seguridad de tipos de i1n.

i1n gestiona los archivos de traducción, la traducción mediante IA y la generación de tipos. next-intl continúa encargándose de la carga en tiempo de ejecución, los componentes de servidor y el enrutamiento. Usted obtiene los beneficios de ambos sistemas sin costos de migración.

Despliegue

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

La generación estática (SSG) y el renderizado del lado del servidor (SSR) de Next.js funcionan perfectamente 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 de control

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

Modo puente

Conserve su biblioteca de i18n actual mientras añade el autocompletado con seguridad de tipos, la traducción por IA y la gestión de archivos de i1n.