next-intl

5 分钟内自动化翻译你的 next-intl 项目

概览

本教程将演示在使用 next-intl 时,如何自动化管理项目的翻译文件。

我们将按以下 4 个步骤进行:

添加环境变量

安装 gtx-cli

创建 gt.config.json 文件

提示: 使用 <T> 组件 可免去维护翻译文件的繁琐工作。


步骤 1:添加环境变量

将生产环境 API key 和项目 ID 添加到环境变量中。 这是使用 gtx-cli 工具所必需的。 你可以在 General Translation 控制台 获取它们。

.env
GT_API_KEY=<your-api-key>
GT_PROJECT_ID=<your-project-id>

步骤 2:安装 gtx-cli

在项目中安装 gtx-cli 工具。

npm i gtx-cli
yarn add --dev gtx-cli
bun add --dev gtx-cli
pnpm add --save-dev gtx-cli

步骤 3:创建 gt.config.json 文件

在项目根目录创建 gt.config.json 文件。

gt.config.json
{
  "defaultLocale": "en",
  "locales": ["zh", "es", "ja"],
  "files": {
    "json": {
      "include": ["i18n/[locale]/*.json"]
    },
  },
}

你可以根据需要自定义 gt.config.json 文件。更多信息请参阅配置文档。

调整 JSON 文件的配置,使 include 路径与项目结构一致。

翻译将保留原始字符串的语法结构。

步骤 4:将 gtx-cli translate 命令加入构建流程

在执行构建命令之前,将 gtx-cli translate 命令添加到你的构建或 CI 流程中,以便自动将翻译注入到项目中。

package.json
{
  "scripts": {
    "translate": "npx gtx-cli translate",
    "build": "npm run translate && <你的构建命令>"
  }
}

这将为你所有的 locales 生成翻译,并将其保存到你的项目中。 如果你想把这些 files 提交到仓库,可以在提交之前先运行这一命令。

搞定!之后每当项目有变更时,系统都会自动更新项目中的所有翻译 JSON 文件。


注意

  • 你可以使用 gtx-cli translate 命令自动将翻译添加到项目中。
  • 如果你打算提交翻译文件,可以在提交之前先运行 gtx-cli translate 命令。
  • 若要配置翻译的输出路径,请参阅配置文档。

下一步

这份指南怎么样?

next-intl