Skip to main content

为 Next.js 应用添加日语和西班牙语

Devin 安装 next-i18next，将硬编码字符串提取到 locale JSON 文件中，添加日语和西班牙语翻译，并在浏览器中验证语言切换。
AuthorCognition
Category功能开发
1

（可选）通过 Ask Devin 界定代码库范围

如果你不确定你的 Next.js 应用是如何构建的，或者不清楚哪些组件包含硬编码字符串，可以先使用 Ask Devin 进行排查：你也可以直接在 Ask Devin 中启动一个 Devin 会话，它会保留之前获取到的全部上下文。
2

开始进行 i18n 配置

为 Next.js 应用添加国际化，意味着要配置本地化路由、设置中间件、提取所有硬编码文案并创建翻译文件——这些都要在你能测试一次语言切换之前完成。Devin 会处理整个流程：安装 next-i18next，配置 Next.js 的 locale 路由，从数十个组件中提取字符串，并在浏览器中验证结果。在会话开始时使用 /plan 斜杠命令，这样 Devin 会先检查你的代码库——它会判断你使用的是 Pages Router 还是 App Router，找出合适的 i18n 库，并在编写任何代码之前先列出整体方案。先审阅这个计划，并在它开始执行之前提出修改建议。
3

Devin 如何完成设置

Devin 会以有条不紊的方式处理你的 Next.js 代码库——配置 i18n 流程、提取字符串并构建本地化文件。如下所示：
  1. 安装依赖项 —— 运行 npm install next-i18next i18next react-i18next 并创建配置文件：
// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'ja'],
  },
};

// next.config.js
const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
  // ...你现有的配置
};
  1. 扫描每个组件 — 读取 components/ 和 pages/ 中的每个文件，识别 JSX 中的硬编码文本、placeholder 和 aria-label 等属性中的文本、模板字符串以及错误字符串
  2. 构建本地化文件 — 在 public/locales/ 下创建结构化 JSON： 
// public/locales/en/common.json
{
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "loading": "Loading..."
  },
  "auth": {
    "login": "Log in",
    "signup": "Create account",
    "forgotPassword": "Forgot your password?"
  },
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

// public/locales/ja/common.json
{
  "common": {
    "save": "保存",
    "cancel": "キャンセル",
    "loading": "読み込み中..."
  },
  "auth": {
    "login": "ログイン",
    "signup": "アカウント作成",
    "forgotPassword": "パスワードをお忘れですか？"
  },
  "dashboard": {
    "welcome": "おかえりなさい、{{name}}",
    "items_one": "{{count}} 件",
    "items_other": "{{count}} 件"
  }
}

// public/locales/es/common.json
{
  "common": {
    "save": "Guardar",
    "cancel": "Cancelar",
    "loading": "Cargando..."
  },
  "auth": {
    "login": "Iniciar sesión",
    "signup": "Crear cuenta",
    "forgotPassword": "¿Olvidaste tu contraseña?"
  },
  "dashboard": {
    "welcome": "Bienvenido de nuevo, {{name}}",
    "items_one": "{{count}} elemento",
    "items_other": "{{count}} elementos"
  }
}
  1. 就地替换字符串 — 为每个组件包裹 useTranslation('common')，并将硬编码文本替换为 t() 调用，同时处理动态值的插值，例如 t('dashboard.welcome', { name: user.name })
  2. 配置服务端加载 — 在每个页面中添加 serverSideTranslations，以便在渲染时即可获取翻译内容： 
// pages/dashboard.tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});
  1. 添加语言切换器 — 在导航栏中创建一个使用 Next.js 路由语言切换功能的下拉菜单：
// components/LanguageSwitcher.tsx
import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const router = useRouter();

  const switchLocale = (locale: string) => {
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <select
      value={router.locale}
      onChange={(e) => switchLocale(e.target.value)}
    >
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="ja">日本語</option>
    </select>
  );
}
4

测试与迭代

Devin 运行 npm run dev，在其内置浏览器中打开应用，并在 /en、/es 和 /ja 路由之间来回访问，以验证一切正常工作。如果出现问题——缺少翻译、布局溢出、路由返回 404——Devin 会自动修复并重新测试。在任意时间都可以使用 /test 斜杠命令，让 Devin 重新运行所有测试并在浏览器中重新验证。最终提交 PR 之前使用 /review，让 Devin 自查代码中是否有遗漏的文案、键名不一致或缺少 serverSideTranslations 调用。Devin 会检查：
  • 所有可见文本都已翻译（在西班牙语/日语模式下没有残留的英文字符串）
  • 使用更长的西班牙语字符串或更宽的日文字符时，布局不会出错
  • 语言切换器可以在三种语言环境之间正常切换
  • 插值的值（用户名、计数）在每种语言环境中都能正确渲染
  • 复数规则工作正常（例如，“1 item” → “1 件”（日语），“1 elemento”（西班牙语））
  • Next.js 语言环境路由正常工作——/ja/dashboard 会显示日文版本
5

从此处开始迭代

在完成基础的 i18n 设置后，继续扩展它。
6

更新仓库配置

此任务会安装新的依赖（next-i18next、i18next、react-i18next）。在 PR 合并后，更新你的代码库设置，这样 Devin 的环境快照在后续会话中就会包含这些包：
  1. 前往 Settings > Devin’s Environment > Repositories
  2. 选择你的代码库并点击 Configure
  3. 在 Upkeep > Maintain dependencies 下，确认已设置安装命令（例如 npm ci）
  4. 点击 Save 更新快照
你也可以设置 Upkeep Frequency，让 Devin 按计划自动重新执行依赖安装——这样可以在你的 package.json 发生变更时保持快照为最新状态，从而避免后续会话在启动时浪费时间安装依赖包。
7

使用 Devin Review 审查此 PR

Devin 提交 PR 后，使用 Devin Review 来审查这些 i18n 变更。Devin Review 可以帮助发现遗漏的硬编码字符串、不一致的翻译 key 命名，以及各页面中缺失的 serverSideTranslations 调用。