Next.js 最好用的 i18n 解决方案，并发布到阿里云 Serverless大家好，我是双越老师。本文分享我开发【

大家好，我是双越老师，也是 wangEditor 作者

今年我致力于开发一个 Node 全栈 AIGC 知识库项目划水AI ，包括 AI 写作、多人协同编辑。复杂业务，真实上线，大家可以去注册试用。

开始

在开发划水AI 项目的过程中，参与项目的同学在群里反馈：拿这个项目去面试一个全栈岗位，技能非常匹配，而且很多出海业务团队都是这个技术栈。

适合出海业务，那就加一个 i18n 国际化多语言，能更好的展示项目成果，体现技术能力。

本文我把划水AI 开发 i18n 国际化的过程分享出来，供大家学习参考，demo 源码链接在文章最后。

划水AI 用的是 Next.js 技术栈，要开发 i18n 国际化多语言，首先要查询 Next.js 相关文档 nextjs.org/docs/pages/…

文档给出了两种策略：Sub-page routing 和 Domain routing

Sub-page routing 就是给路由加前缀 nextjs.org/docs/pages/…

例如，默认路由

切换到其他语言，所有路由加前缀，如英文加 /en/

Domain routing 就是使用不同的域名 nextjs.org/docs/pages/…

例如，默认域名 huashuiai.com ，英文用 huashuiai.us，法语是 huashuiai.fr

对于我们来说，肯定是选择第一个更好一些，简单方便。域名和证书配置太麻烦了，对于我们这个创业项目来说不适合。

我见过很多大型的、国际化的网站，选择使用 Domain routing ，因为人比较多，每个国家或区域一个域名，方便分开管理。例如 LinkedIn、 Amazon

按照文档写一个 demo ，发现有问题，访问设定的多语言，结果返回 404

再参考官网的 examples（文档开头给出的）源码 github.com/vercel/next…

发现这个 examples 用的是 Next.js 13 版本的 Pages Router ，不是最新的 App Router

官网不可用，我只能寻求第三方的解决方案，好在 Next.js React 第三方 i18n 解决方案有很多。

Next-intl 是专门为 Next.js ，支持 App router 和 Pages router，可以直接看 get started 文档 next-intl-docs.vercel.app/docs/gettin…

这里详细的讲解了如何在 App router 中增加 i18n 多语言配置，创建一个 Next.js 项目，参照一步一步做即可。

无论是在 Server Component 还是 Client Component ，都可以使用 useTranslations 可生成函数 t ，用于翻译文字。很统一，很好用。

【注意】如果想用在 Client Component ，需要在 Layout 中使用 <NextIntlClientProvider 包裹所有子节点。

可通过 router.replace 切换 locale 语言，直接参考 demo 源码中的 local-switcher 组件即可

执行 npm run dev 本地运行没问题，可切换语言，正常跳转页面，如下图

增加新功能，本地运行 OK 以后一定要发布到你的生产环境去试一试，指不定就有什么坑呢。

Next.js 可以很好的运行在阿里云 FC 函数计算 Serverless 中，可以配合 Github webhook 监听某个分支，自动触发重新部署，非常方便。

划水AI 已经稳定运行了几个月的时间，无论是发布、回滚、功能运行，都非常稳定。强力推荐。

登录阿里云 FC ，创建一个函数。选择 Node 环境。地域建议选择国外，否则会涉及到域名备案。启动命令写 npm run start ，端口写 3000 。

这里的“ZIP 包上传代码”，需要我们自己提前打包代码。PS. 这里我们是做 demo 所以这样打包，真实项目我们会设置监听 GitHub 代码提交，自动化部署。

npm run build
zip -rq -y code.zip ./

函数创建成功过以后，进入函数详情页，如果你有域名，就绑定一个域名。刚才区域选择了国外，这里的域名就不用备案，方便。

然后访问域名，即可看到整体的效果：Next.js + next-intl 可以很好的在阿里云 FC 平台运行。

当然，本文只是一个 demo ，真实项目开发时还会遇到很多问题，例如

有兴趣的可以加入学习、并参与开发划水AI 项目，能得到真实的项目经验。