参考手册Workspace 包参考

i18n 国际化

统一的国际化(i18n)包,让网站支持中英文等多语言

本页是 01MVP 模板的 Workspace 包参考。若你正在按功能启用或改造模板,先看 国际化接入

@01mvp/i18n

这是什么

i18n 是 internationalization 的缩写(i 和 n 中间有 18 个字母)。简单说就是让你的网站支持多语言 -- 中文用户看到中文页面,英文用户看到英文页面。

@01mvp/i18n 是基于 next-intl 封装的翻译管理工具,帮你组织和管理所有语言的翻译文本。

能做什么

  • 中英文切换 -- 用户切换语言,页面文字自动跟着变
  • 分层翻译 -- 通用的按钮、表单等文案放在共享翻译里,每个 app 自己的业务文案放在 app 级翻译里
  • 变量插值 -- 翻译文本里可以嵌入用户名、数字等动态内容
  • 复数处理 -- "1个项目"和"5个项目"自动选正确的说法
  • 邮件多语言 -- 给不同语言的用户发对应语言的邮件

核心类型

国际化配置(I18nConfig)

Prop

Type

获取消息选项(GetMessagesForLocaleOptions)

Prop

Type

怎么配置

翻译文件以 JSON 格式存放,结构按"模块.功能.具体内容"嵌套:

packages/i18n/translations/shared/
├── zh.json    # 共享中文翻译
└── en.json    # 共享英文翻译

apps/01mvp-web/src/modules/i18n/translations/
├── zh.json    # App 级别中文翻译(可覆盖共享翻译)
└── en.json    # App 级别英文翻译

添加新语言的步骤

分别在共享翻译和 App 级翻译目录下,复制一份现有的 JSON 文件并重命名为新语言代码(如 ja.json),然后翻译里面的内容。

I18nConfiglocales 对象中添加新语言条目,例如 "ja": { label: "日本語", currency: "JPY" }

LocaleSwitch 组件或语言选择列表中加入新语言的选项。

大概原理

  1. 每段需要翻译的文字都有一个"key"(键名),比如 auth.login.title
  2. 翻译文件里存的是 key → 翻译文本的映射:{ "auth.login.title": "登录" }
  3. 代码里用 key 来取文本:t("auth.login.title"),系统根据当前用户语言返回"登录"或"Login"
  4. 如果某个 key 在当前语言里没有翻译,自动回退到默认语言(中文)
  5. 更深的功能(日期格式化、复数、富文本)由底层 next-intl 库处理,具体用法参考 next-intl 文档

最佳实践

  • 翻译 key 起有意义的名称,不要用 btn1text2 这种
  • 用命名空间分组(useTranslations("auth.login")),避免每个地方都写完整路径
  • 共享翻译放通用的 UI 文案,业务专属文案放 app 级翻译
  • 不要硬编码中文/英文文本,始终走翻译系统

相关链接