如何为应用或网站添加多种语言

要为应用添加多种语言，需要把所有界面文字移入翻译文件（每种语言一个文件），用 i18n 库加载这些文件，并添加一个会记住选择的语言切换器。对于希望在搜索中被找到的公开页面，要为每种语言分配独立的 URL，例如 /fr/，并用 hreflang 标签把各个版本关联起来。然后处理人们容易忽略的部分：日期、数字和货币，某些语言中较长的文本，从右到左书写的文字，以及存储在数据库中的内容。

你会听到的术语

• 国际化（i18n）：为代码做准备，使其支持任何语言，包括没有硬编码的字符串、随地区变化的格式以及灵活的布局。“18”代表 i 和 n 之间的字母个数。
• 本地化（l10n）：使应用适配某种特定语言或市场，主要是翻译，有时还包括货币、图片和法律文本。
• 语言区域（Locale）：语言，加上可选的地区，例如 en-GB 或 pt-BR。

只需做一次国际化，之后每新增一种语言，工作主要就是翻译。

方案与权衡

对大多数应用来说，带翻译文件的标准 i18n 库是合适的基础。如果你愿意，可以先用机器翻译或 AI 翻译生成初稿，然后请母语流利的人审校客户最常看到的内容。

多语言应用的组成部分

翻译文件

代码不再直接写 <h1>Welcome back</h1>，而是写 t('dashboard.welcome')，每种语言都有一个保存对应文字的文件：

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

变量应使用占位符，而不是拼接句子片段，因为不同语言的词序不同。同时要使用库提供的复数规则：英语只有两种形式（1 item、2 items），而某些语言有三种、四种或更多形式。

日期、数字和金额的格式化

不要手动格式化这些内容。浏览器内置的 Intl API 可以按任意语言区域进行格式化：1,234.5 在英语中写作 1.234,5（德语写法）；日期在日-月顺序和月-日顺序之间切换；货币符号的位置也会变化。日期应以 UTC 存储，金额以数字加货币代码的形式存储，并且只在显示时进行格式化。

可伸缩的布局

译文往往比英文长，德语和芬兰语的单词尤其如此。避免使用固定宽度的按钮和被截断的标签，并用你最长的那种语言进行测试。

从右到左书写的语言

阿拉伯语、希伯来语、波斯语和乌尔都语是从右到左书写的。对于这些语言区域，应在页面上设置 dir="rtl"，并使用 CSS 逻辑属性（用 margin-inline-start 代替 margin-left；在 Tailwind 中用 ms-4 代替 ml-4），使布局自动镜像。表示方向的图标（如箭头）同样需要翻转。

语言切换器与自动检测

在每个页面上都显示切换器，并使用每种语言自己的名称作为标签（“Deutsch”“Français”“العربية”），而不是使用国旗，因为国旗代表的是国家，而不是语言。首次访问时可以检测浏览器的首选语言，以建议对应的版本，但访客的明确选择应优先，并且要记住这一选择。

URL 与 SEO

对于希望出现在搜索结果中的页面，每种语言都需要有自己的 URL。截至 2026 年 9 月，Google 对多语言网站的建议如下：

• 每种语言使用独立的 URL：子目录（example.com/fr/）最简单；子域名和国家顶级域名也可以使用。不推荐使用 URL 参数（?lang=fr）。
• 不要仅通过 Cookie 或浏览器设置切换语言；Google 的抓取工具可能永远看不到其他版本。
• 不要按语言自动跳转；应改为在各版本之间提供链接。
• 使用 hreflang 告诉 Google 哪些页面互为译文。每个版本都必须列出自身以及所有其他版本，否则这些标注可能被忽略。对于回退页面，添加 x-default。
• Google 根据页面的可见内容来判断其语言，而不是根据 lang 或 hreflang——因此要翻译整个页面，而不只是菜单。

每个版本仍应设置 <html lang="fr">：屏幕阅读器会用它来选择正确的发音，这也是无障碍访问的要求。

登录后的应用界面不需要被索引，因此对于这些页面，把语言保存在用户资料中即可。关于如何让公开页面首先被抓取，请参见 AI 构建网站的 SEO。

数据库中的内容

界面文字保存在文件中；产品名称、博客文章和分类等内容则保存在数据库中。两种常见的做法：

• 翻译表：product_translations (product_id, locale, name, description)。结构清晰，并且可以扩展到多种语言。
• 每个字段一个 JSON 列：name: {"en": "...", "fr": "..."}。适用于语言较少的情况，更简单。

要提前决定翻译缺失时的处理方式——通常应回退到默认语言，而不是显示空白。

邮件与通知

保存每位用户的语言，并将其用于邮件、通知和 PDF。很容易把应用翻译好，却忘了欢迎邮件仍然是英文的。

行之有效的提示词

使用 react-i18next 添加国际化。将每一个用户可见的字符串移入 locales/en.json，并使用带命名空间的键，用插值和复数规则代替字符串拼接，并使用 Intl 按当前语言区域格式化日期、数字和价格。暂时不要修改任何文案。

添加法语和德语。公开的营销页面使用 /fr/ 和 /de/ 作为 URL 前缀，英文保留在根路径；每个页面都包含 hreflang 链接（包括自引用和 x-default），并为每个页面设置 html lang。添加一个语言切换器，显示每种语言的本地名称。对于登录后的页面，将语言保存在用户资料中。

添加支持从右到左书写的阿拉伯语：为阿拉伯语设置 dir="rtl"，将左右的外边距和内边距替换为逻辑属性，镜像方向性图标，并检查表单和表格的阅读顺序是否仍然正确。

分步操作

1. 根据真实需求选择第一种额外语言——即你的访客或客户所在的地区。
2. 对代码进行国际化：将字符串移入文件，添加复数和 Intl 格式化。先只发布英文版本，并确认没有任何变化。
3. 确定公开页面的 URL 结构，并添加 hreflang。
4. 翻译：用机器翻译或 AI 翻译生成初稿，然后由母语流利的人审校。为译者提供上下文——例如“Book”一词在一个界面中是名词，在另一个界面中却是动词。
5. 翻译数据库内容，并设置回退规则。
6. 本地化其余部分：邮件、错误信息、法律页面，以及图片中包含的文字。
7. 在手机宽度下测试每种语言；如果涉及从右到左的语言，也要测试该语言。
8. 建立流程，确保新功能与翻译同步发布，而不是几个月之后才补上。

常见错误

• 拼接句子（"You have " + n + " messages"），这在其他语言中会出错。
• 组件、错误信息和验证字符串中残留硬编码文字。
• 手动格式化日期和价格。
• 用国旗代表语言，以及会把人困在错误版本中的自动跳转。
• 希望被收录的页面对所有语言只使用同一个 URL。
• 缺少 hreflang 的回链，导致 Google 忽略这些标注。
• 只翻译了界面却没有翻译内容，或者反过来。
• 定价、法律和结账页面使用未经审校的机器翻译。

多语言检查清单

• 没有硬编码的用户可见字符串；使用了复数规则和占位符
• 日期、数字和货币使用 Intl 格式化
• 每个页面都有带本地名称的语言切换器；用户的选择会被记住
• 公开页面每种语言都有独立的 URL；没有强制跳转
• 每个版本（包括自身和 x-default）都设置了 hreflang
• 每个页面都设置了 html lang（需要时还设置了 dir="rtl"）
• 数据库内容已翻译，并设置了合理的回退
• 邮件和通知以用户的语言发送
• 面向客户的文字已由母语流利的人审校

在 Mythex 中使用多语言

在 Mythex 中，你可以通过在对话中提出要求来添加语言——没有单独的翻译面板——因此上面的提示词可以原样使用。在添加语言之前，先完成国际化步骤，并在预览中检查；这是一项较大的重构，而聊天检查点能让你在出现问题时回滚（聊天与检查点）。如果你希望应用通过 AI 或翻译 API 自动翻译内容，这需要使用你自己的 API 密钥，并保存在项目设置中（环境变量与机密）；如何使用 LLM API 解释了相关费用。新语言准备好后，请再次发布。

常见问题