SaaS 国际化从第一天做起：九种语言，外加从右到左的阿拉伯语

想让 SaaS 支持多语言，连从右到左的阿拉伯语也一起支持，又不想日后推倒重来，该怎么做？从第一个页面就开始做，并让测试来守规矩。Seed 支持九种语言：简体中文、英语、俄语、西班牙语、德语、巴西葡萄牙语、阿拉伯语、法语和日语。应用、管理后台、官网和邮件全都包括在内。切换到阿拉伯语时，整个界面会左右翻转。

这篇文章写给知道“以后再翻译”往往等于“永远不翻译”的创始人和开发者。我会讲清楚文案放在哪里、测试能抓住什么，以及支持从右到左（RTL）到底要花多少功夫。

为什么要从第一天做？

因为以后再做，就得把每个页面重新过一遍。代码里写死的文案、手动拼出来的日期、每一个 margin-left，都要一一找出来修改，而那时代码里早已塞满了功能。如果从一开始就翻译，每个新页面在开发时就顺手翻好，只要几分钟，而不是一个谁都不想碰的大工程。

还有一个更简单的理由：互联网上的大多数人，首选阅读语言并不是英语。能用对方母语说话的产品，起点就领先一步。

文案放在哪里？

Seed 页面上的每一个字都在目录文件里：每个领域、每种语言一个 TypeScript 文件，比如 i18n/app/zh-CN.ts、i18n/site/ja.ts。一共五个领域：应用、管理后台、官网、邮件和 API 的错误信息。英语是源文本，其他文件使用同样的键。

每种语言约 3,900 条，统计于 2026 年 11 月 2 日。preact-components 的组件另外自带它们自己的目录。

应用只加载你正在用的语言，而且是单独的小文件：用中文的人不会顺带下载日语。

怎样防止翻译过期？

靠一个测试：i18n/i18n.test.ts。出现以下情况时它会失败：

• 某种语言缺了一条文案，或者多出一条英语里已经没有的；
• 翻译完成后英语原文又改了（每种语言都有一个锁文件，记录它是根据哪一版英语翻译的）；
• 译文丢了或拼错了 {count} 这样的占位符，或者链接外面的标签；
• 复数缺了这种语言需要的某个形式。阿拉伯语有六种复数形式；
• 某条英语文案已经没有任何代码在用了。

所以，写着 Notes.create 的按钮，或者比英语版落后一周的德语页面，都不会上线。

从右到左到底有多难？

只要布局里从不出现“左”和“右”，就没有想象中那么难。Seed 的样式使用逻辑方向：“开始”和“结束”。在从左到右的页面里，开始在左边；在阿拉伯语里，开始在右边。翻转的活儿交给浏览器。

测试把这一点从愿望变成规则：tests/spacing.test.ts 会检查所有应用，只要有间距类写死了物理方向就会失败。页面会根据语言设置 dir：官网在服务器上设置，应用在你切换语言的那一刻设置。

还有两个细节，忽略了迟早会吃亏：

• 句子里的名字。 像“Anna 邀请你加入 Team 小组”这样的句子，在阿拉伯语里会混合两种方向，拉丁字母的名字可能把标点拖到错误的一侧。用户输入的值都包在 <bdi> 里，它的方向不会影响周围的文字。
• 日期、数字和时间。 每个页面上的每个日期都经过同一个格式化器。另一个测试 tests/no-direct-date-format.test.ts 一旦发现直接调用 toLocaleString() 就会失败。

语言、地区格式和时钟是三个设置

语言随个人资料保存在服务器上，所以在你的所有设备和每封邮件里都一致。地区格式、时区以及 12 小时制或 24 小时制，则是各自独立的设置。在柏林工作的中国工程师，想要中文界面和柏林时间。在上海工作的英国人，可能想要英文界面和 2026/11/03 这样的日期。把这些绑成一个设置，等于保证有一半用户看到错误的日期。

在官网上，语言写在网址里（/zh-CN/pricing、/ar/pricing），不会根据浏览器或 IP 自动跳转，每个页面都会告诉搜索引擎它有哪些语言版本。

谁来翻译？

AI 智能体，按照一份写好的指南 i18n/TRANSLATING.md 来翻译。指南规定了每种语言的语气（中文用“你”，平实亲切）、一份术语表，保证同一个东西在所有页面上叫同一个名字，还有一条规则：翻译的是情境，不是字面。每份新译文都会由第二个智能体回译成英语，再对比意思。这不是专业翻译公司，我也不会假装是。但它远比一个没人看得懂的页面要好。

怎样加第十种语言？

在语言列表里加一行，每个领域加一个目录文件，再在每个应用里加几行加载代码。之后测试会列出新语言还缺的每一条文案，补齐之前一直是红的。

动手试试

打开在线演示，进入个人资料，把语言切换成阿拉伯语，看看整个应用如何翻转过来，然后再切回中文。这篇文章也有全部九种语言的版本，代码采用 MIT 许可证开源。