i18n-frontend-implementer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

i18n Frontend Implementer

i18n 前端实现方案

Implement internationalization with next-intl, react-i18next, or similar libraries.

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

Core Setup

核心配置步骤

1. Install:

npm install next-intl

react-i18next

2. Create dictionaries:

locales/en.json

locales/es.json

3. Provider setup: Wrap app with IntlProvider 4. Translation keys: Hierarchical namespace structure 5. Formatters: Date, number, currency formatting 6. Language switcher: Dropdown or flags UI

1. 安装：

npm install next-intl

或

react-i18next

2. 创建翻译字典：

locales/en.json

、

locales/es.json

3. 配置Provider：使用IntlProvider包裹整个应用 4. 翻译键：采用分层命名空间结构 5. 格式化工具：日期、数字、货币格式化 6. 语言切换器：下拉菜单或国旗图标UI

Translation Structure

翻译文件结构

json

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

json

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

Usage Examples

使用示例

tsx

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>

tsx

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

// 复数形式示例
t('items', { count: 5 }) // "5 items"

// 格式化示例
<p>{formatDate(date, { dateStyle: 'long' })}</p>

Best Practices

最佳实践

Use namespaces for organization, extract all text to translations, handle plurals properly, format dates/numbers per locale, provide language switcher, support RTL languages, lazy-load translations.

使用命名空间进行组织，将所有文本提取到翻译文件中，正确处理复数规则，根据地区设置格式化日期/数字，提供语言切换器，支持RTL语言，懒加载翻译文件。