在Next.js 14中简单实现多语言支持（基于App Router）的国际化功能
内容提要
本文介绍了如何在Next.js 14中实现国际化（i18n）功能，包括项目结构、语言资源文件创建、默认语言设置及语言切换功能。用户可以通过不同URL访问相应语言的页面，从而提升用户体验。
延伸解读
路由结构与语言前缀
文章采用动态路由段[lang]作为语言前缀，将页面置于app/[lang]下，使URL如/en或/zh直接对应语言版本。这种设计清晰分离了不同语言的内容，但需注意将layout.tsx和page.tsx移入该目录，并调整globals.css等资源的引用路径，否则样式可能失效。
默认语言与中间件重定向
直接访问根路径会因缺少语言前缀而404，文章通过middleware.ts检测路径并重定向到默认语言。初始实现固定为en，后续优化为根据Accept-Language头自动匹配用户偏好，并利用cookie记忆选择。这提升了体验，但需注意中间件匹配规则应排除_next等内部路径，避免干扰静态资源。
静态生成与元数据适配
对于SSG，文章在layout.tsx中通过generateStaticParams返回所有语言参数，确保构建时生成各语言页面。同时，在page.tsx中使用generateMetadata动态设置标题和描述，使元数据随语言变化。这些步骤是i18n完整落地的关键，但需确保字典加载在服务端完成，避免客户端泄露资源文件。
Q&A
如何在Next.js 14中实现国际化功能？
在Next.js 14中实现国际化功能需要创建一个名为[lang]的文件夹，定义不同语言的JSON资源文件，并在pages.tsx中使用lang参数获取相应语言的文本。
如何设置Next.js应用的默认语言？
可以通过创建middleware.ts文件来设置默认语言，检查URL中是否有语言标识，如果没有，则重定向到默认语言页面。
如何在Next.js中创建多语言资源文件？
多语言资源文件可以在public/dictionaries目录下创建，使用JSON格式定义不同语言的文本内容，例如en.json和zh.json。
如何优化用户的语言选择体验？
可以通过cookies存储用户的语言选择，以便下次访问时自动使用用户上次选择的语言，或者根据用户的系统或浏览器语言自动选择。
在Next.js中如何处理静态生成时的国际化？
在处理静态生成时，需要在layout.tsx中定义generateStaticParams函数，返回支持的语言参数，以便生成相应语言的静态页面。
如何在Next.js中实现语言切换功能？
可以通过添加下拉菜单或链接来实现语言切换功能，例如提供链接让用户选择不同语言的页面。
