i18n-frontend-implementer

i18n 前端实现者

使用 next-intl、react-i18next 或类似库实现国际化。

核心设置

1. 安装：npm install next-intl 或 react-i18next 2. 创建字典：locales/en.json、locales/es.json 3. Provider 设置：使用 IntlProvider 包装应用 4. 翻译键：采用分层命名空间结构 5. 格式化工具：日期、数字、货币格式化 6. 语言切换器：下拉菜单或旗帜 UI

翻译结构

{
  "common": { "nav": { "home": "Home", "about": "About" } },
  "auth": { "login": "Sign In", "logout": "Sign Out" },
  "errors": { "required": "{field} is required" }
}

使用示例

const t = useTranslations('common');
<h1>{t('nav.home')}</h1>

// With plurals
t('items', { count: 5 }) // "5 items"

// With formatting
<p>{formatDate(date, { dateStyle: 'long' })}</p>

最佳实践

使用命名空间进行组织，将所有文本提取到翻译文件中，正确处理复数形式，按区域设置格式化日期和数字，提供语言切换器，支持 RTL 语言，并延迟加载翻译。