参考手册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),然后翻译里面的内容。
在 I18nConfig 的 locales 对象中添加新语言条目,例如 "ja": { label: "日本語", currency: "JPY" }。
在 LocaleSwitch 组件或语言选择列表中加入新语言的选项。
大概原理
- 每段需要翻译的文字都有一个"key"(键名),比如
auth.login.title - 翻译文件里存的是 key → 翻译文本的映射:
{ "auth.login.title": "登录" } - 代码里用 key 来取文本:
t("auth.login.title"),系统根据当前用户语言返回"登录"或"Login" - 如果某个 key 在当前语言里没有翻译,自动回退到默认语言(中文)
- 更深的功能(日期格式化、复数、富文本)由底层 next-intl 库处理,具体用法参考 next-intl 文档
最佳实践
- 翻译 key 起有意义的名称,不要用
btn1、text2这种 - 用命名空间分组(
useTranslations("auth.login")),避免每个地方都写完整路径 - 共享翻译放通用的 UI 文案,业务专属文案放 app 级翻译
- 不要硬编码中文/英文文本,始终走翻译系统