next-intl
在 5 分钟内自动完成 next-intl 项目的翻译
概览
本教程将演示在使用 next-intl 时,如何自动管理项目的翻译文件。
我们将按照以下 4 个步骤进行:
提示:
使用 <T> 组件 可免去管理翻译文件的繁琐工作。
步骤 1:添加环境变量
将生产环境的 API key 和项目 ID 添加到你的环境变量中。
这是使用 gtx-cli 工具所必需的。
这些信息可在 General Translation 仪表板 获取。
GT_API_KEY=<你的 API Key>
GT_PROJECT_ID=<你的项目 ID>步骤 2:安装 gtx-cli
在项目中安装 gtx-cli 工具。
npm i gtx-cliyarn add --dev gtx-clibun add --dev gtx-clipnpm add --save-dev gtx-cli步骤 3:创建 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 流程中,以自动将翻译注入到项目中。
{
"scripts": {
"translate": "npx gtx-cli translate",
"build": "npm run translate && <你的构建命令>"
}
}这会为你所有的 locales 生成翻译,并将其保存到你的项目中。 如果你想把这些 files 提交到仓库,可以在提交之前先运行此命令。
搞定!现在,每当你的项目发生变更时,系统会自动更新你所有的翻译 JSON files。
备注
- 你可以使用
gtx-cli translate命令为项目自动添加翻译。 - 如果你打算将翻译文件提交到版本库,可以在提交前先运行
gtx-cli translate命令。 - 要配置翻译的输出路径,请参阅配置文档。
后续步骤
- 请参阅 CLI 工具的使用指南。
本指南如何?