我最大的错误：为什么你应该从第一天就 i18n 你的 Next.js 应用（Vibe Coding 生存指南）

Source: Dev.to

我构建了一个叫 FAMI‑KAN 的分账应用（最初面向日本市场），使用 Next.js 15 App Router 和 Supabase。由于我主要通过 Vibe Coding（使用 Claude/Gemini 等 AI 代理进行迭代编码）来开发，功能开发速度异常快。虽然我完全没有专业的编程经验，但 AI 让我能够打造出一个功能完整的产品。我当时觉得自己简直是天才。

随后，X（Twitter）扩展了多语言功能。突然之间，全球流量成为了真实的可能性。我意识到：

如果全球的用户通过 X 点击我的应用链接，却只能看到日文，我的用户旅程就彻底崩溃了。

于是，我决定把我的应用翻译成 8 种语言。

“有了 AI 应该很容易吧？” 我这么想。

我大错特错。

从第一天起就没有使用 i18n（next-intl）是这个项目最大的失误。即便有 Vibe Coding 的强大助力，将已有的单体代码库迁移到国际化也是一场噩梦。下面是我如何在迁移过程中生存下来、AI 在此过程中的意外局限，以及最终的结果。

噩梦：5000 行组件

一开始，我没有把 UI 文本拆分到 JSON 字典中，而是直接在组件里硬编码日文字符串。我的主事件详情页（page.tsx）的代码膨胀到 超过 5000 行，充斥着复杂且状态繁重的 React 代码。

我的第一次尝试

我向 AI 代理询问：

“在这个 5000 行的文件中找出所有日文文本，并用 useTranslations() 替换它们。”

AI 的失败

AI 完全崩溃了。它触及了上下文窗口限制，输出被截断，还出现了幻觉变量。应用甚至无法编译。

解决方案

我必须停止把 AI 当作魔法棒来使用。

我没有让 AI 直接改写 React 组件，而是让它编写一个 Node.js AST（抽象语法树）替换脚本。我在本地运行该脚本，安全地分块提取并用 t('…') 替换字符串。

经验教训： 不要让 AI 直接编辑巨大的文件；让 AI 编写用于编辑这些文件的工具。

在 Next.js 15 中生存：“知识截止”陷阱

选择翻译库是另一个难题。我选择了 next-intl，因为它支持 App Router。然而，我的 Vibe Coding 方法却碰到了壁垒。

AI 的失误

大多数 AI 模型的训练数据截止到 2023 年或 2024 年初。Next.js 15 引入了一条严格的新规则：动态路由（如 [locale]）中的 params 必须是一个 Promise。AI 不断生成旧的 Next.js 14 代码（params.locale），导致编译器（tsc --noEmit）不停地抛出错误。

解决方案

作为非程序员，我不知道如何通过阅读官方文档来修复它。于是只能盲目地把愤怒的编译器错误一次又一次地复制粘贴回 AI，迫使它通过暴力方式自行纠正并更新上下文。

经验教训： Vibe Coding 很强大，但 AI 的过时知识会让你与现代编译器搏斗。

保护我辛苦获得的 SEO

我最大的担忧之一是会破坏我为日本市场建立的 SEO。

如果我更改根 URL 结构，我现有的已索引页面和博客的反向链接都会失效。我明确指示 AI：

“不要触碰日语的现有路由结构。只在其他语言下添加 /en/ 或 /es/ 作为子目录。”

得益于 next-intl 的中间件，我实现了这一点。根目录 / 仍然是日语（保护 SEO），而 /en/ 处理新的英文流量。此外，AI 还帮助我构建了一个动态的 sitemap.ts，以正确输出 hreflang 标签。

本地化 > 翻译（当 AI 过于有创意时）

我的应用为首次使用的用户生成示例演示数据。

在日语中，演示事件是 “The Tabei Family’s Trip to Okinawa.”

翻译问题

如果我仅字面翻译，英文用户会看到 “Trip to Okinawa.” 当然，他们可能知道东京或京都，但冲绳并不是全球每个人都熟悉的地点。

解决方案（AI 的惊人表现）

我对 AI 说：

“让演示数据对全球用户更自然。”

我本以为它只会使用 “Tokyo Trip” 或 “Kyoto Trip”。但令我惊讶的是，AI 完全进入本地化模式。它为每种语言重新编写了演示情境！

AI 完全忽略了我原来的日语上下文，这其实是正确的做法。这种文化同理心让应用在全球用户眼中更具本土化体验。

Bonus: Localizing for AI Crawlers (llms.txt)

最终，我们已经进入了 Generative Engine Optimization (GEO) 时代。用户不再仅仅在搜索 Google；他们在向 ChatGPT 和 Gemini 提问。

我不仅仅翻译了 UI。我指示 AI 为英文 AI 爬虫创建了 /en/llms.txt 和 /en/llms‑full.txt 文件。现在，当英文用户向 AI 询问 “有什么好的应用可以按比例分摊旅行费用？” 时，AI 拥有直接的英文本地化 Markdown 上下文可供读取，从而推荐我的应用。

结论

如果你今天要启动一个新的 Next.js 项目，从第一天起就加入 next-intl——即使你只支持母语。硬编码字符串以后会让你吃亏。

Vibe 编码是一种令人难以置信的超能力。它让我——一个没有编程背景的独立开发者——在几天内完成了一个包含 8 种语言的大规模更新。但 AI 仍有其局限，从上下文窗口到过时的框架知识。

如果你觉得这个故事有帮助，可以在这里查看 FAMI‑KAN here。我还将在下个月初在 Product Hunt 上发布，任何关于英文 UI 的反馈都将不胜感激！

你可以在 X 上关注我的公开创作，账号是 @vibe_archi。