把 toolcenter 的工具描述翻译功能做完了，正好来分享一下关于网站多语言的相关内容，主流方案、技术选型思考、实操流程。
网站本身已经用 next-intl 做了界面的多语言支持，但工具的描述内容取决于提交时候的语言，收录的是中文就是中文，英文就是英文。
这带来一个问题：中文用户访问 /zh/tools/xxx 时，页面框架是中文的，但工具描述是英文的。体验上不太统一，SEO 上也不太理想，搜索引擎会认为这是一个"伪多语言"页面。优化完之后：
先区分一下网站多语言涉及的两类不同内容：
UI 文案：按钮文字、导航菜单、表单标签、提示信息等。这类内容是固定的，数量有限，改动频率低。
动态内容：用户生成的内容、商品描述、文章正文等。这类内容存在数据库里，数量大，可能持续增长。
UI 文案用 JSON 文件管理是标准做法，我用的是 next-intl。这篇重点聊一下动态内容的多语言存储方案。
数据库方案：字段后缀 vs JSONB vs 翻译表
做多语言内容存储，常见的方案有三种：
方案 A：字段后缀
description TEXT, -- 英文
description_zh TEXT, -- 中文
优点是查询简单，直接select，可以给每个字段单独建立索引。缺点也明显，每加一种语言就要新增字段，表会越来越庞大。
适合只做两三种语言，对于查询性能要求高的场景。
方案 B：JSONB 存储
description JSONB, -- {"en": "...", "zh": "..."}
扩展语言不需要改动表结构。
问题在于现在有成百上千条数据都要迁移格式，而且 PostgreSQL 的 JSONB 字段在更新时会全量复制，对于频繁查询的场景，性能影响太大了。
方案 C：独立翻译表
tool_translations (tool_id, locale, description, ...)
不需要改动主表，新增语言只需要扩展翻译表。缺点是查询需要两表关联，性能稍微差点。比较适合需要支持 5+ 种语言，或者语言列表会动态增长。
我选择了加字段，这样做的好处是查询简单，前端逻辑清晰。而且当前我这个网站只需要中英双语，所以还不太需要翻译表，后期确实计划做更多语言，到时候再迁移也不迟。
翻译 API：怎么选
调研了几个翻译服务的免费额度：
| 服务 | 免费额度 | 备注 |
|---|---|---|
| 腾讯翻译君 | 500万字符/月 | 中英互译质量不错 |
| 小牛翻译 | 600万字符/月 | 专业术语翻译好 |
| 火山翻译 | 200万字符/月 | 字节系产品 |
| 百度翻译 | 100万字符/月 | 通用场景稳定 |
| 50万字符/月 | 超出后价格较贵 | |
| DeepL | 50万字符/月 | 欧洲语言最佳 |
粗算了一下翻译量，腾讯的 500 万字符免费额度对网站目前的数据量来说绰绰有余，而且国内平台接入方便，不需要绑定信用卡，后期超过了就付费。
实现细节
技术细节我们不用管，都交给Claude code 或者 codex 就行，非技术的朋友完全不用担心搞不懂啥的，问AI就行。要是对这块感兴趣的朋友也可以研究。
建议先用plan模式讨论实现方案，确定之后再让AI执行，避免失控，尤其是网站已经初具规模。
快捷键:Shift + Tab
按多次会循环切换:
第一次 Shift + Tab → Auto-accept 模式(自动接受)
第二次Shift +Tab →Plan 模式(只规划不执行)
第三次Shift +Tab →回到 Edit 模式(正常模式)
Plan 模式的作用:
Claude 只做研究和规划，不会修改文件或执行命令
会先整理出详细计划让你确认，再执行
适合复杂重构或需要谨慎操作的场景
需要我们手动操作的部分我记录下来了，主要是拿到翻译的API key 和 执行SQL语句。
Step 1: 翻译API key 获取（以腾讯机器翻译为例）
- 登录 https://console.cloud.tencent.com/tmt
- 开通机器翻译 TMT 服务
- 获取 SecretId 和 SecretKey
要去访问管理获取
1、点击右上角头像 → 访问管理，或直接访问：https://console.cloud.tencent.com/cam/capi
2、点击 新建密钥 或使用已有的密钥，那里会显示你的 SecretId 和 SecretKey。
注意，密码只会显示一次，记得复制保存下来。
- 添加到 .env.local 文件:
TENCENT_SECRET_ID=xxx
TENCENT_SECRET_KEY=xxx
Step 2: 数据库改造
去supabase执行AI给你的SQL语句。
ALTER TABLE tools ADD COLUMN description_zh TEXT;
ALTER TABLE tools ADD COLUMN long_description_zh TEXT;
ALTER TABLE tools ADD COLUMN short_description_zh TEXT;
总结
如果你也在做多语言功能，可以参考这个决策路径：
UI 文案（按钮、导航、提示）：
- 用 JSON 文件 + i18n 库，这是标准做法
- Next.js 推荐 next-intl，React 推荐 react-i18next
动态内容（数据库里的业务数据）：
- 只需要 2-3 种语言 → 字段后缀（简单直接）
- 需要 5+ 种语言 → 翻译表（灵活扩展）
- 语言多但查询少 → JSONB（结构紧凑）
翻译 API：
- 预算充足 → DeepL（质量最好）或 GPT-4（上下文理解强）
- 免费优先 → 腾讯/小牛/火山（国内平台额度大）
- 欧洲语言 → DeepL（这是它的强项）
方案选择没有绝对的对错，适合当前项目情况的就是好的。
💡 AI 工具的爆发，让普通人也能快速做出产品。
但如何做？如何变现？如何真正走向海外市场？
👉 想了解更多 AI 编程 & 出海实战信息
扫码或微信搜索 257735，发送暗号 【美金】
了解详情，加入实战社群。
微信扫一扫，了解更多详情
🚀 我们的出海作品展示平台上线啦！
欢迎访问 Showcase 平台，
这里汇聚了学员的出海实战作品，方便大家获得反馈、积累曝光机会。
我们还会定期举办创作活动与奖励计划，欢迎来逛逛！
🔗 更多教程请访问 ipengtao.com
文章评论