フレームワークの統合
主要なフレームワークで i18n-rosetta を設定するためのステップバイステップのガイドです。
- Hugo
- Next.js (next-intl)
- React (react-i18next)
Hugo (TOML / YAML / Markdown)
プロジェクト構造
Hugo は文字列の翻訳に i18n/ を使用し、ページコンテンツに content/ を使用します。
my-hugo-site/
├── i18n/
│ ├── en.toml ← source of truth
│ ├── fr.toml
│ └── ja.toml
├── content/
│ ├── posts/
│ │ ├── hello.md ← source (English)
│ │ ├── hello.fr.md
│ │ └── hello.ja.md
│ └── about.md
└── .env.local
セットアップ
npm install --save-dev i18n-rosetta
{
"version": 3,
"inputLocale": "en",
"localesDir": "./i18n",
"contentDir": "./content",
"format": "auto",
"languages": ["fr", "de", "ja", "es", "ko", "zh"]
}
i18n-rosetta sync # sync i18n string files + content files
i18n-rosetta sync --dry # preview changes without writing
コンテンツ翻訳の詳細
Front matter: YAML (---) と TOML (+++) の両方の区切り文字をサポートしています。デフォルトでは title、description、summary、subtitle、caption、および linkTitle を翻訳します。その他のすべてのフィールド (date、draft、tags、weight、slug など) は保持されます。設定の translatableFields でカスタマイズできます。
ブロックの保護: コードブロック、Hugo のショートコード、インラインコード、および生の HTML は、Unicode のセンチネルプレースホルダーを使用して自動的に保護されます。これらは変更されずにそのまま通過します。
ファイル名の規則: Hugo のファイル名による翻訳パターンに従います。
my-post.md→my-post.fr.mdmy-post.en.md→my-post.fr.md(ソースのサフィックスを削除)
既存ファイルのスキップ: 既存の翻訳済みファイルが上書きされることはありません。強制的に再翻訳するには、ターゲットファイルを削除してください。
複数形
TOML および YAML のロケールは CLDR の複数形をサポートしています。
[items]
one = "{{ .Count }} item"
other = "{{ .Count }} items"
差分抽出のために内部では items.one および items.other として表現され、書き込み時に正しいセクション形式に再シリアライズされます。
next-intl (JSON)
プロジェクト構造
my-app/
├── messages/
│ └── en.json ← source of truth
├── src/
│ ├── i18n/
│ │ ├── routing.ts
│ │ └── request.ts
│ └── middleware.ts
└── .env.local
セットアップ
npm install --save-dev i18n-rosetta
{
"version": 3,
"inputLocale": "en",
"localesDir": "./messages",
"languages": ["fr", "de", "ja", "es", "ko", "zh", "pt", "ar"]
}
npx i18n-rosetta sync
messages/fr.json や messages/ja.json などを作成します。ネストされたキー構造を維持したまま完全に翻訳されます。next-intl はこれらを自動的に認識します。
開発ワークフロー
{
"scripts": {
"dev": "i18n-rosetta watch & next dev",
"i18n:sync": "i18n-rosetta sync",
"i18n:audit": "i18n-rosetta audit"
}
}
react-i18next (JSON)
フラットなファイル構造 (推奨)
locales/
├── en.json
├── fr.json
└── ja.json
{
"version": 3,
"inputLocale": "en",
"localesDir": "./locales",
"languages": ["fr", "de", "ja"]
}
npx i18n-rosetta sync
ネストされたディレクトリ構造
{locale}/{namespace}.json 構造を使用する場合は、フラット化 → 翻訳 → フラット化解除を行う同期スクリプトを作成してください。詳細については react-i18next のドキュメントを参照してください。