i18n-frontend-implementer

i18n フロントエンド実装者

next-intl、react-i18next、または類似のライブラリを使って国際化を実装します。

基本設定

1. インストール：npm install next-intl または react-i18next 2. ディクショナリの作成：locales/en.json、locales/es.json 3. プロバイダーの設定：アプリを 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 言語に対応し、翻訳を遅延読み込みします。