Next.js

使用 next-intl 或直接使用 i1n SDK 将 i1n 集成到 Next.js 中。

设置

在您的 Next.js 项目中运行 i1n init。CLI 会自动检测是否存在 next-intl，并在您的 locales/ 目录中配置嵌套的 JSON 格式。

i1n 可与 App Router 和 Pages Router 配合使用。您可以独立使用 i1n SDK，或通过 Bridge Mode 连接到 next-intl。

独立模式

从 i1n 导入 init 和 t，加载您的翻译资源，并在组件中直接使用 t()。自动生成的 i1n.d.ts 文件提供完整的类型安全和 IDE 自动补全。

这种方法完全取代了 next-intl。使用 init() 加载资源，使用 setLocale() 切换语言。不需要额外的 i18n 库。

Bridge Mode with next-intl

如果您的项目已在使用 next-intl，只需添加一行代码即可将其连接到 i1n：registerI1n((key, params) => nextIntlT(key, params))。这将在保留现有 next-intl 设置的同时，添加 i1n 的类型安全自动补全功能。

i1n 管理翻译文件、AI 翻译和类型生成。next-intl 继续处理运行时加载、服务器组件和路由。您可以获得两个系统的优势，且无需迁移成本。

部署

在构建步骤或 CI/CD 管道中添加 i1n pull，以确保在部署前翻译始终保持同步。

Next.js 的静态生成 (SSG) 和服务器端渲染 (SSR) 都可与 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))

Next.js

设置

独立模式

Bridge Mode with next-intl

部署

相关

仪表板

桥接模式