SuperAPI AI 工具集

intlayer-next-js

前端与建站

查看项目

更新于 10-15 17:23

技能介绍

用途:在 Next.js 项目中集成 Intlayer 国际化,兼容 App Router 与 Pages Router。核心思路是组件级内容声明:不使用全局翻译大文件,而是在使用内容的 Next.js 组件旁创建 *.content.ts 文件声明词典。

主要能力:通过 intlayer 的 t() 与 Dictionary 类型声明翻译,key 需唯一并与 useIntlayer() 传入值一致;服务端组件用 next-intlayer/server 的 IntlayerServerProvider 提供 locale 并调用 useIntlayer;客户端组件加 "use client",改用 next-intlayer 的 useIntlayer,并需包裹在 IntlayerClientProvider 中。

使用方式:创建声明文件,例如 src/components/MyComponent/myComponent.content.ts,用 t({en, fr, es}) 定义多语言文本并 satisfies Dictionary 导出;再在组件中调用 useIntlayer("my-component") 读取 content.text。服务端页面可从 params 取 locale 传给 IntlayerServerProvider。

适用场景:需要按组件组织翻译的 Next.js 多语言站点,支持 Next.js 14、15、无 locale 路径及 Page Router 等环境。限制:资料未提供安装命令、收费、价格、具体效果与更多使用步骤。