使用简单 JSON + 自定义 t 函数实现轻量多语言国际化（无需 next-intl）

在 Next.js 开发国际化（i18n）项目时，许多人会直接安装 next-intl、react-intl、i18next 这样的重量级库。 但对于一些结构简单、只需要基础文本翻译的网站来说，使用这些库反而会带来额外的复杂性。

如果你只想让项目支持：

✔ 标题多语言 ✔ 按钮多语言 ✔ 文案多语言 ✔ 扩展灵活、无需复杂配置

那么你完全可以自己写一个 超轻量 i18n 方案。

今天我们来介绍一个非常简单、方便扩展、可在任何环境使用的多语言实现方式： 基于 JSON 语言包 + t() 翻译函数。

---

目录结构：简单、清晰、可扩展

首先在项目中新建 i18n 文件夹：

/i18n
  ├─ en.json
  ├─ de.json
  ├─ fr.json

内容例如：

en.json

{
  "hotTags": "Hot Tags",
  "hotArticles": "Hot Articles",
  "latestNews": "Latest News"
}

de.json

{
  "hotTags": "Beliebte Tags",
  "hotArticles": "Beliebte Artikel",
  "latestNews": "Neueste Nachrichten"
}

fr.json

{
  "hotTags": "Tags Populaires",
  "hotArticles": "Articles Populaires",
  "latestNews": "Dernières Nouvelles"
}

---

自定义 t() 翻译函数

这一小段代码就是整个多语言系统的核心：

import en from "@/i18n/en.json";
import de from "@/i18n/de.json";
import fr from "@/i18n/fr.json";

const locales = { en, de, fr };

export function t(locale: string, key: string): string {
  const dict =
    (locales as Record<string, Record<string, string>>)[locale] || locales["en"];

  return dict[key] ?? key;
}

工作原理

1. 根据传入的 locale（en / de / fr）选择对应字典
2. 如果找不到语言，自动使用英文作为 fallback
3. 如果 key 不存在，原样返回 key（方便调试）

类型安全（解决 TS 报错）

上面代码使用了：

(locales as Record<string, Record<string, string>>)

让 TypeScript 明确知道字典是：

• key: 语言代码
• value: 文本映射表（键值对）

这样就不会出现：

「元素隐式具有 any 类型」

---

在页面中使用

示例： 你在首页 HomePage 中传入 locale：

<h2 className="text-2xl font-bold">
  {t(locale, "hotTags")}
</h2>

渲染效果将根据语言不同自动变化：

• English → Hot Tags
• Deutsch → Beliebte Tags
• Français → Tags Populaires

无需额外库，无需复杂配置。

---

优点总结

特点	说明
极轻量	无需安装任何 i18n 库
纯 JSON 文件	非技术人员也能直接编辑
完全可控	不会被第三方库的 API 或复杂行为束缚
易扩展	想加语言？加个 JSON 文件即可
易维护	键值结构简单不容易出错

适合用在：

• 企业官网
• 展示性网站
• CMS 文章网站（如 Strapi + Next.js）
• SEO 友好的多语言站点
• 需要快速上线 MVP 的项目

---

还能进一步增强！

要是你想扩展成更强的国际化系统，你还可以加入：

✔ 支持嵌套 key（如 home.title）

✔ 支持变量插值（如 Hello {{name}}）

✔ 自动检测浏览器语言

✔ 服务端自动注入 locale（Next.js App Router）

我可以进一步为你升级成 完整简易版 i18n 框架。

---

最后

这种方式简单却非常实用，特别适合 已经有后端（例如 Strapi） + 前端 Next.js 结构的多语言站点。