在 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

  1. 安装运行时库

    添加 next-intl 或你偏好的库,让应用能在运行时加载各语言的文案。

    npm install next-intl
  2. 配置 next-intl 基础路由

    按 next-intl 文档接入中间件、provider 和路由段;如果已经配置完成,可以跳过这一步。

  3. 运行 Globalize Skill 安装器

    在 Next.js 项目根目录安装 Skill,让 Agent 与你的路由配置对齐。

    npx skills add globalize-now/globalize-skills --all
  4. 确认已检测到 next-intl

    让 Agent 验证 provider 和消息路径是否符合 globalize.now 对 Next.js 的约定。

  5. 审查建议的语言文件布局

    检查建议的 messages 目录和文件名,确认符合你选定的按语言拆分消息的模式。

  6. 把字面量重构为翻译调用

    批准改动,把内嵌的英文替换为 t() 或接入 provider 的同类辅助函数。

  7. 推送到 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

回到首页,了解产品详情和定价 →

其他集成

免费开始