国际化方案

前端国际化工程化——i18n 架构设计、ICU MessageFormat 语法、React/Next.js 国际化方案(next-intl/react-intl)、翻译工作流、RTL 适配、日期/数字/货币格式化。

国际化方案

i18n 最容易被低估的地方:它不是把中文换成英文

很多团队一提国际化,第一反应还是:

  • 文案提取
  • 多语言切换
  • 翻译文件

这些当然是其中一部分。

但如果把 i18n 理解成“文本翻译工程”,那几乎注定会在真实产品里踩坑。

更准确的理解应该是:

国际化是在系统层面让产品能够适配不同语言、地区、书写方向和文化表达方式。

这个定义里最重要的是“系统层面”。

因为它说明 i18n 不只是内容资源问题。

它还会影响:

  • 路由
  • SEO
  • 日期与数字格式
  • 组件布局
  • 表单与错误文案
  • 文案长度与 UI 约束

为什么 i18n 不该在项目快结束时再补

这是最常见、也最昂贵的错误之一。

很多团队会先默认做一种语言,等产品要出海了,再回头补国际化。

这通常会暴露一连串结构问题:

  • 文案硬编码
  • 组件宽度写死
  • 排版只适配一种语言长度
  • 路由与 SEO 没有 locale 概念
  • 时间和货币格式混乱

所以成熟团队会把 i18n 当成一种架构能力。

不是后期装饰。

一个更准确的定义

如果要用一句更成熟的话概括:

i18n 是让产品在不同语言和地区语境中仍然保持正确表达、正确格式和可用交互的工程体系。

这句话里有三个特别重要的词:

  • 正确表达
  • 正确格式
  • 可用交互

它们对应的不是同一类问题。

文本为什么只是第一层

文本资源当然最先可见。

例如:

  • 登录文案
  • 按钮文案
  • 空状态
  • 错误提示

但系统真正复杂的地方,往往在文本之后。

例如:

  • 复数规则不同
  • 时间表达习惯不同
  • 数字分组和小数点符号不同
  • 货币位置和精度不同
  • 语言长度变化导致布局崩坏

这也是为什么 i18n 工程如果只靠“翻译 JSON”,通常是不够的。

翻译键管理为什么本质上是信息架构问题

很多团队把翻译键设计当成细节。

其实它会深刻影响长期维护。

一个好的翻译键结构,应该帮助团队回答:

  • 这段文案属于哪个业务域
  • 这段文案的上下文是什么
  • 相近文案是否真的是同一个含义

如果只为了省事,把所有“保存”都复用成一个 key,

很可能会在不同语境下造成翻译不自然。

所以翻译键设计不是越复用越好。

它要先服务语义清晰,再考虑复用。

ICU MessageFormat 为什么值得认真学

很多团队在 i18n 里最晚补的一课,就是 message formatting。

但它其实很核心。

因为自然语言里最容易出问题的,不是静态句子。

而是:

  • 复数
  • 性别
  • 插值
  • 条件表达

ICU MessageFormat 的价值就在于:

它给团队提供了一种更标准、更可维护的表达方式。

这会比字符串拼接安全很多。

为什么不能手写日期和数字格式

这是非常典型的工程误区。

很多项目会在代码里手写:

  • 2026/04/01
  • $123.45
  • 1,000,000

这在单语言、本地业务里可能看不出问题。

一到多地区产品就会暴露。

所以成熟团队应该把一个原则写死:

日期、数字、货币和相对时间,优先交给 Intl 体系处理,而不是自己拼格式。

这不是偷懒。

这是减少错误。

路由和 SEO 为什么也是 i18n 主战场

国际化产品并不只是页面里有翻译。

它还会影响:

  • URL 结构
  • locale 切换
  • canonical 与 hreflang
  • 搜索引擎索引

如果这些没设计好,国际化会只停在“用户进入页面后能切语言”。

而不是成为完整的多语言产品体验。

所以 i18n 在 Web 产品里必须和路由、SEO 一起看。

RTL 为什么不是“顺手翻转一下”

很多团队知道 RTL 很重要。

但低估了它的影响范围。

RTL 不是只把文本从右往左排。

它会影响:

  • 布局方向
  • 边距逻辑
  • 图标方向
  • 手势和动画感知

这也是为什么逻辑属性,如 margin-inline-start 这类写法非常重要。

它能让系统更自然地适配方向变化,而不是堆大量例外样式。

next-intl、react-intl、i18next 怎么看更合理

这三个名字很常见。

但讨论它们时,不要只看“谁更流行”。

更重要的是:

你的系统需要什么集成边界。

next-intl

更适合 Next.js 语境,尤其在 App Router 和 Server Components 下,优势会更明显。

它的价值在于:

更贴近 Next.js 的运行时和路由结构。

react-intl / FormatJS

它的重要性在于标准化 message formatting 能力和较成熟的 ICU 体系。

如果团队非常在意消息表达一致性,这一条线会很稳。

i18next

它更像一个适用范围更广、插件生态更大的通用方案。

对于非 Next.js 或多框架环境,也会更灵活。

翻译工作流为什么不是工具采购问题

很多团队会把 Crowdin、Lokalise、Phrase 这类平台当作解决方案本身。

它们当然很有帮助。

但真正困难的,往往不是工具,而是流程:

  • 谁写源文案
  • 谁审核翻译
  • 版本如何同步
  • 文案变更怎么通知
  • 过期 key 怎么清理

如果流程不清,平台再强也只是一个堆字符串的地方。

文案长度为什么会反过来影响组件设计

这是前端团队最容易在后期才感受到的痛。

一种语言里很短的标签,换成另一种语言可能会长很多。

这会直接暴露出:

  • 按钮宽度写死
  • 表单行高不合理
  • 卡片布局过于紧绷
  • 弹窗标题空间不足

所以成熟团队不会把 i18n 和组件设计分开看。

因为语言长度本身就是设计约束的一部分。

中国互联网语境里,i18n 为什么经常被拖后

中国很多产品起步时主要面向单一中文语境。

再加上业务节奏快,团队很容易把国际化看成未来选项。

所以常见情况是:

  • 出海了才补
  • 新增语言才补
  • 海外版本独立再做一套

这会导致系统越来越分裂。

所以在中国语境里,i18n 的真正价值,经常体现在:

能否在产品准备出海或多地区扩展之前,就把基础架构种下去。

海外语境里为什么 i18n 更像默认能力

很多海外产品天然就面向多地区、多语言用户。

这会让:

  • 路由层 locale
  • SEO 多语言
  • ICU 消息
  • RTL 适配

更容易在早期就进入主流程。

所以海外语境里,i18n 往往不是“出海后再补”。

而是产品架构默认能力之一。

容易被讲浅的误区

误区一:i18n 就是多语言切换

太浅。

它还包括格式、本地化、布局方向、SEO 和流程。

误区二:翻译平台接上就万事大吉

工具不等于流程。

误区三:所有相同字面值都该复用同一个 key

字面相同不代表语义相同。

误区四:布局问题后面再修

语言长度和 RTL 适配越晚补,代价越高。

面试或技术分享里怎么讲更成熟

一个更成熟的表达可以是:

i18n 不是文本翻译层,而是让产品在不同语言和地区语境中仍然保持正确表达、正确格式和可用交互的系统能力。真正的工程重点不仅是消息资源管理,还包括 ICU 格式化、Intl API、RTL 支持、路由与 SEO,以及组件系统是否能承受语言长度变化。

如果团队把 i18n 放到项目后期才考虑,通常暴露出来的不是翻译问题,而是整个前端结构没有为多地区产品准备好。

实践建议

实践一:选一个页面做“双语言长度压力测试”

把中文、英文、德语这类长度差异明显的文案放进去,看布局会不会立刻出问题。

实践二:把所有日期和货币展示统一改成 Intl

这个练习能非常直观地暴露系统里多少地方在手写格式。

实践三:为一个小型 Next.js 页面设计 locale 路由方案

同时考虑:

  • URL
  • SEO
  • 语言切换
  • 消息加载边界

延展阅读