SuperAPI AI 工具集

nextjs-i18n

前端与建站

查看项目

更新于 10-15 22:13

技能介绍

用途:该技能用于在 Next.js 项目中落地国际化(i18n),统一维护语言环境来源,并实现利于 SEO 的子路径路由。适用于新增 i18n、做语言环境路由或语言检测策略的场景,App Router 与 Pages Router 均可参考。

主要能力:语言环境路由遵循 URL 优先方案(App Router 用动态段 app/[lang]/page.tsx,Pages Router 在 next.config.js 中配置 i18n);语言检测通过 middleware.ts 从 Accept-Language 头或 Cookie 判断用户语言并重定向;服务端加载 messages/*.json 词典以保持客户端包体较小;在 metadata API 的 generateMetadata 中生成 hreflang 标签;用 generateStaticParams 在构建时预渲染本地化静态页面。库选择上,App Router 推荐 next-intl,旧项目可用 react-intl 或 next-translate,详细内容见 references/react-intl.md 与 references/next-intl.md。

使用方式(工作流):安装 next-intl 并创建 messages/en.json、messages/fr.json 等;在 middleware.ts 中添加语言环境检测中间件;创建 app/[lang]/layout.tsx 并接收 locale 参数;通过 getMessages() 服务端加载翻译;在 generateMetadata 中加入 hreflang 标签;用 generateStaticParams 预渲染各语言环境。验证:运行 next build,确认所有语言环境路径均能渲染。

限制与反模式:禁止在 JSX 中硬编码字符串,应使用翻译键;不在客户端打包翻译词典,改由服务端 getMessages() 加载;不混用 URL 语言环境模式,应一致使用子路径或域名。优先级为 P2。具体代码示例与其他库的完整配置细节,资料中未提供。