Next.jsアプリケーションでのi18n翻訳キー
App RouterでのNext.jsにおけるi18n翻訳キー構造化の完全ガイド。next-intlセットアップ、サーバーコンポーネント翻訳、クライアントコンポーネントパターン、ミドルウェアベースのロケールルーティングをカバーします。
Framework Guide
詳細な説明
Next.jsでのi18nキー
App RouterによるNext.jsは、従来のReact SPAとは異なるi18nアプローチが必要です。最も人気のあるソリューションはnext-intlで、サーバーコンポーネントとクライアントコンポーネントの両方をサポートします。
メッセージ構造
next-intlは規約としてPascalCaseの名前空間キーを使用します。
サーバーコンポーネントでの使用
useTranslationsをインポートして名前空間を指定します。
メタデータ翻訳
getTranslationsを使用してgenerateMetadata内で翻訳にアクセスします。
Next.js固有のベストプラクティス
- トップレベル名前空間にPascalCaseを使用 -- Next.jsコンポーネント命名に合致
- メッセージをルートごとに分割 -- 各
[locale]/page.tsxに独自の名前空間 - サーバーコンポーネントで
getTranslationsを使用 -- クライアントサイドバンドルの肥大化を回避 - ビルド時にメッセージを検証 -- next-intlはCIでのメッセージ検証をサポート
- ロケール検出にミドルウェアを使用 --
middleware.tsがURLベースのロケールルーティングを処理
ユースケース
多言語サイトを構築するNext.js開発者は、サーバーコンポーネントとクライアントコンポーネントの両方で動作するi18nキーが必要です。キー構造は静的生成（SSG）、サーバーサイドレンダリング（SSR）、クライアントサイドインタラクティビティをサポートする必要があります。