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.
import { t } from 'i1n'
export default function HomePage() {
return (
<main>
<h1>{t('home.title')}</h1>
<p>{t('home.subtitle')}</p>
</main>
)
} import { registerI1n } from 'i1n'
import { useTranslations } from 'next-intl'
const t = useTranslations()
registerI1n((key, params) => t(key, params))