Next.js

Интегрируйте i1n с Next.js, используя next-intl или напрямую SDK i1n.

Настройка

Запустите i1n init в вашем проекте Next.js. CLI автоматически обнаружит next-intl, если он присутствует, и настроит вложенный формат JSON в вашем каталоге locales/.

i1n работает как с App Router, так и с Pages Router. Вы можете использовать i1n SDK в автономном режиме или подключить его к next-intl через Bridge Mode.

Автономный режим

Импортируйте init и t из i1n, загрузите ваши ресурсы перевода и используйте t() непосредственно в ваших компонентах. Автоматически сгенерированный файл i1n.d.ts обеспечивает полную типобезопасность и автодополнение в IDE.

Этот подход полностью заменяет next-intl. Используйте init() для загрузки ресурсов и setLocale() для смены языка. Дополнительная библиотека i18n не требуется.

Режим моста с next-intl

Если ваш проект уже использует next-intl, подключите его к i1n одной строкой: registerI1n((key, params) => nextIntlT(key, params)). Это сохранит вашу существующую настройку next-intl, добавив при этом типобезопасное автодополнение от i1n.

i1n управляет файлами перевода, AI-переводом и генерацией типов. next-intl продолжает обрабатывать загрузку во время выполнения, серверные компоненты и маршрутизацию. Вы получаете преимущества обеих систем без затрат на миграцию.

Развертывание

Добавьте i1n pull в шаг сборки или конвейер CI/CD, чтобы убедиться, что переводы всегда синхронизированы перед развертыванием.

Статическая генерация (SSG) и серверный рендеринг (SSR) в Next.js безупречно работают с файлами переводов, управляемыми 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))

Связанное