该资料介绍项目中的国际化(i18n)模式,为服务端组件与客户端组件提供不同的翻译方案,适用于需要多语言支持的 Next.js 应用。
用途:处理翻译文本、语言区域(locale)与本地化 URL 生成。支持 en(英语)和 zh(中文)。
路由:所有路由包含 [locale] 参数,如 /en/about、/zh/about。使用 getLocalePath() 生成带语言区域的 URL,可传入目标 locale 切换语言,例如 getLocalePath("/about", "zh")。
翻译文件:服务端组件使用组件与路由目录下的 translations.json;客户端组件使用 [ComponentName].translations.json(组件专属,便于 tree shaking)。文件内按语言键组织文案。
服务端用法:从 @/utils/translations 引入 getTranslations,调用 await getTranslations(params.locale) 获取翻译对象,再用 t.title 等取值。
客户端用法:文件加 "use client",从 @/hooks/useTranslations 引入 useTranslations() 钩子,通过上下文读取翻译。需由服务端父组件用 TranslationContextProvider 包裹并传入组件专属翻译内容,否则客户端组件无法获取文案。
常见模式:用 getLocalePath 做语言切换链接;可按条件选择不同翻译键;变量替换通过字符串 replace 实现,如 t.greeting.replace("{name}", userName)。
常见错误:在客户端组件使用 getTranslations(应改用 useTranslations);未用 TranslationContextProvider 包裹客户端组件;硬编码 locale 字符串(应使用 params.locale);创建单一庞大的翻译文件(应按组件拆分)。
限制:资料未提供安装步骤、依赖版本、性能数据或收费标准;示例基于 Next.js 与项目内部路径约定,其他框架或不具备相同工具的项目需自行调整。