i18next/next-i18next

これは何？

主な機能

• 01App Router、Pages Router、および両ルーターを併用するプロジェクトを、1つのコードベースでサポートします。
• 02CookieまたはAccept-Languageから言語を検出し、ロケール付きパスにリダイレクトします。
• 03public内のファイル、またはサーバーレス環境で動作する動的インポートから翻訳を読み込みます。
• 04サーバーコンポーネントからクライアントコンポーネントへ、読み込み済みのリソースをシリアライズして渡します。
• 05オプションのプラグインを通じて、ICUとMF2のメッセージ形式を利用できます。
• 06HTTPやLocizeなど、i18nextのカスタムバックエンドを利用できます。

ユースケース

• 既存のNext.js App Routerサイトに多言語対応を追加する。
• Pages Routerからの移行中に、ローカライズされたルートとされていないルートを併用する。
• 翻訳したNext.jsアプリをVercelなどのサーバーレスホストにデプロイする。
• CDNや翻訳管理サービスから翻訳を読み込む。

クイックスタート

1. 1

   パッケージをインストールする

   npm install next-i18next i18next react-i18next
2. 2

   翻訳用のJSONファイルと、resourceLoaderを使うi18n設定を作成する

3. 3

   createProxy(i18nConfig)をエクスポートするproxy.tsを追加する

4. 4

   initServerI18nextとI18nProviderを使ってルートレイアウトを設定する

使う前に知っておきたいこと

• !サーバーレスプラットフォームでは、実行時にpublic/内のファイルを利用できないため、resourceLoaderを使って翻訳を読み込む必要があります。
• !開発時にimport()ベースのローダーで翻訳をホットリロードすると停止することがあり、回避策が必要です。
• !cacheComponentsを有効にすると、ファイルベースの翻訳読み込みに対してnext devが未キャッシュデータの警告を出します。

トピック

よくある質問

next-i18next とは？

i18nextとreact-i18nextをNext.jsのApp Router、Pages Router、middlewareに組み込む翻訳ツールキット。 next-i18nextはi18nextとreact-i18nextの上に構築されたレイヤーで、アプリの翻訳に必要なNext.js固有の処理を担います。proxy/middlewareによる言語検出とロケールへのリダイレクト、サーバーコンポーネントとクライアントコンポーネントの使い分け、サーバーからクライアントへの読み込み済み翻訳の受け渡しに対応します。

next-i18next は無料で使えますか？ライセンスは？

next-i18next は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

next-i18next は今もメンテナンスされていますか？

活発にメンテナンス中。next-i18next の最終コミットは 2026年11月3日 です。

next-i18next は何に使えますか？

既存のNext.js App Routerサイトに多言語対応を追加する。 Pages Routerからの移行中に、ローカライズされたルートとされていないルートを併用する。 翻訳したNext.jsアプリをVercelなどのサーバーレスホストにデプロイする。 CDNや翻訳管理サービスから翻訳を読み込む。

next-i18next のインストール方法は？

パッケージをインストールする: npm install next-i18next i18next react-i18next 翻訳用のJSONファイルと、resourceLoaderを使うi18n設定を作成する createProxy(i18nConfig)をエクスポートするproxy.tsを追加する initServerI18nextとI18nProviderを使ってルートレイアウトを設定する

next-i18next はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/i18next/next-i18next