一篇文章学会 Next.js 实现 i18n 国际化多语言(基于App Router)
内容提要
本文介绍了如何在 Next.js 14 中实现国际化多语言功能，重点在于使用 App Router 进行配置。通过创建语言资源文件、设置默认语言和使用中间件，用户可以轻松切换语言。文章提供了详细的代码示例和步骤，帮助开发者构建多语言网站。
延伸解读
路由结构调整：从根目录到 [lang] 动态段
文章将 layout.tsx 和 page.tsx 移入 app/[lang] 目录，这是 App Router 下实现 i18n 的关键步骤。这样做让所有页面都带上语言前缀，如 /en 或 /zh，从而在路由层面区分语言版本。需要注意的是，移动文件后要同步修改 layout.tsx 中对 globals.css 的引用路径，否则样式会失效。这种结构也便于后续为每种语言生成静态参数。
中间件与语言协商：自动跳转与用户偏好
中间件负责检查 URL 是否包含支持的语言，若无则根据用户偏好重定向。文章先简单使用默认语言，后优化为解析 Accept-Language 请求头，借助 negotiator 和 @formatjs/intl-localematcher 匹配最合适的语言。这能根据浏览器或系统语言自动跳转，提升体验。同时，将用户选择存入 Cookie，下次访问时优先使用，避免重复协商。
多语言在元数据与静态生成中的处理
除了页面内容，metadata 也需要多语言支持。文章通过 generateMetadata 函数，根据当前 lang 参数获取对应翻译，动态设置页面标题和描述。对于 SSG，则利用 generateStaticParams 返回所有语言参数，在构建时生成各语言版本的静态页面。这样既保证了 SEO 友好，也维持了静态站点的性能优势。
语言切换与后续完善方向
文章提供了通过链接或下拉框切换语言的示例，例如使用 Link 组件跳转到 /en 或 /zh。这属于基础实现，实际项目中可能还需要考虑切换后保持当前页面路径、处理动态路由等。文章也指出国际化不止于语言，还涉及时间、货币等格式，但本文仅聚焦语言部分，为读者留下了进一步探索的空间。
Q&A
如何在 Next.js 中实现国际化多语言功能？
在 Next.js 中实现国际化多语言功能，可以通过创建语言资源文件、设置默认语言和使用中间件来配置。具体步骤包括定义不同语言的 JSON 文件、在页面中调用多语言函数以及设置 URL 重定向。
Next.js 中的中间件如何处理默认语言设置？
中间件通过检查 URL 中是否包含语言标识，如果没有，则根据用户的浏览器语言或默认语言进行重定向，确保用户访问时自动跳转到合适的语言版本。
如何优化获取默认语言的方式？
可以通过获取浏览器的 Accept-Language 字段来优化默认语言的选择，解析该字段中的语言列表，并根据配置的语言列表匹配获取对应的语言。
在 Next.js 中如何存储用户选择的语言？
可以在 Cookie 中存储用户选择的语言，以便下次访问时使用，从而提升用户体验。
如何在网页的 metadata 中实现多语言处理？
在页面的 metadata 中，可以通过在 generateMetadata 函数中根据当前语言获取相应的标题和描述，从而实现多语言处理。
如何在 Next.js 中实现语言切换功能？
可以通过链接或下拉框实现语言切换，用户点击后跳转到对应语言的页面，从而提升用户体验。
