在 Next.js 中使用 globalize.now
五分钟内为 Next.js 应用配置好国际化。
Next.js 通过 next-intl、next-i18next 等库提供了完善的 i18n 支持,但这些库默认代码库里已经有了翻译键。globalize.now 解决的是前一步:它接手一个满是硬编码英文的 Next.js 应用,生成键、语言文件和重构后的组件,交给 next-intl(或任何运行时库)直接使用。
前提条件
- 一个 Next.js 项目(App Router 或 Pages Router)
- 一个 Git 仓库
- Node.js 18+
- 选定的 i18n 运行时库(推荐 next-intl)
如何在 Next.js 中配置 globalize.now
安装运行时库
添加 next-intl 或你偏好的库,让应用能在运行时加载各语言的文案。
npm install next-intl配置 next-intl 基础路由
按 next-intl 文档接入中间件、provider 和路由段;如果已经配置完成,可以跳过这一步。
运行 Globalize Skill 安装器
在 Next.js 项目根目录安装 Skill,让 Agent 与你的路由配置对齐。
npx skills add globalize-now/globalize-skills --all确认已检测到 next-intl
让 Agent 验证 provider 和消息路径是否符合 globalize.now 对 Next.js 的约定。
审查建议的语言文件布局
检查建议的 messages 目录和文件名,确认符合你选定的按语言拆分消息的模式。
把字面量重构为翻译调用
批准改动,把内嵌的英文替换为 t() 或接入 provider 的同类辅助函数。
推送到 Git
合并分支并推送,之后每次 Git 推送,globalize.now 都会保持翻译同步。
常见问题
next-intl 要求特定的消息结构
解决方法: globalize.now 会自动检测 next-intl 的约定,并写出与你配置的语言目录一致的 JSON,减少手动调整结构的工作。
我已经翻译了一些字符串,globalize.now 会覆盖它们吗?
解决方法: 现有的键会尽可能保留,新增字面量则逐步添加,翻译人员之前的成果不会丢失。
常见问题
globalize.now 能配合 next-intl 和 next-i18next 使用吗?
可以。globalize.now 专注于仓库结构——键、JSON 目录和组件调用点——而 next-intl 或 next-i18next 仍负责在运行时加载文案。选择与你的路由模式匹配的运行时即可,globalize.now 会据此调整输出。每个项目初始化时只需运行一次 npx skills add globalize-now/globalize-skills,除非你想主动刷新 Skill。
globalize.now 同时支持 App Router 和 Pages Router 吗?
支持。Agent Skill 会检测你使用的路由方式,并让提取逻辑与对应的布局文件、路由处理器和 Provider 保持一致。globalize.now 不会替换 Next.js 路由,只确保流经这些路由的字符串都有对应的键。配置完成后,App Router 的服务端组件和客户端组件都会引用运行时所需的同一套语言文件。
已经做了部分 i18n 的 Next.js 应用,还能用 globalize.now 吗?
可以。让 Agent 指向仓库,它会扩展现有的消息包,补全仍是字面量的部分。这很常见,比如一开始只翻译了营销页面。globalize.now 合并新键时不会丢弃已有翻译,团队可以逐个页面迁移。
globalize.now 对服务端组件和客户端组件的处理有区别吗?
globalize.now 会按每个边界所用的技术栈,把字面量改写成对应的辅助函数,并遵守 Next.js 对 hooks 和 Provider 运行位置的限制。JSON 输出由服务端和客户端 bundle 共用,无需维护重复的目录。需要交互的组件,仍按 Next.js 文档标记为客户端组件。
globalize.now 如何与 Next.js 的静态生成配合?
语言文件存放在 Git 中,所以 `next build` 会照常打包 SSG 或 SSR 路由通过 next-intl 引入的同一份 JSON。globalize.now 除了让字符串来自数据文件而非字面量之外,不会改动静态生成流程。新文案上线时,再推送一次 Git,就会在下次部署前刷新翻译。
运行 npx skills add globalize-now/globalize-skills 之前,需要先安装 next-intl 吗?
如果你已确定运行时用 next-intl,建议先安装,这样 Agent 可以立即接好 Provider。如果还没选定库,也可以直接运行 npx skills add globalize-now/globalize-skills(Skill 会帮你推荐技术栈),装好依赖后再重新运行一次初始化即可。两种方式的结果相同:键提交到 Git,并在每次推送时同步。
在 Next.js 中试用 globalize.now
从项目根目录开始:
npx skills add globalize-now/globalize-skills --all