serverSideTranslationsのカスタマイズ第1引数:initialLocale第2引数:namespacesRequired第3引数:configOverride第4引数:extraLocalesNext.js構成を利用せずにnext-i18nextを利用する場合おわりにはじめにこんにちは。フロントエンドエンジニア兼デザイナーのKimuraです。以前、Reactでの多言語対応を実現するreact-i18nextの使い方について記事を書きました。今回は、Next.jsで多言語対応を実現するnext-i18nextの使い方をご紹介いたします。本記事の内容は、next-i18nextの公式ドキュメントを参考としています。利用技術Next.jsTypeScriptnext-i18nextnext-i18nextの役割とはNext.jsは、ディレクトリ構造をベースとしたルーティングシステムを持っており、URL内のサブパスまたはドメインにロケール情報を追加することが可能です。(詳細はこちら)しかし、Next.jsにはページやコンポーネント上で多言語メッセージを切り替える機能は含まれておりません。この部分を担うのが、next-i18nextとなります。本記事では、URL内にロケール情報を追加し、それに基づいてページ内の表示言語が切り替わるように実装します。next-i18nextのカスタマイズ方法について記載します。URLへロケール情報を追加まずは、ロケール情報をURLに追加します。ロケール情報は、サブパス(http://example/ja)かドメイン名末尾(http://example.ja/)として追加することができます。今回はサブパスへ追加します。以下の通りに設定することで、日本語と英語のロケールが有効となります。デフォルトロケールは日本語とします。next-i18nextの公式ドキュメントにならい、i18nの設定を別ファイルに分割しています。既存設定...}これにより、ロケール情報のサブパスを持つルーティングが有効となります。localhost:3000/jalocalhost:3000/en表示している画面のソースは以下のとおりです。現在は言語切替を実装していないため、仮置きで両言語のメッセージを表示しています。Title</h1>)}インストール続いて、画面上のメッセージ切替を実装します。ここからは、next-i18nextを利用するため、まずはインストールを行います。日本語、英語それぞれのJSONファイルを配置します。"Title"}}_app.tsx変更カスタムAppのエクスポートをappWithTranslation経由に変更します。各ページ内での言語切替を実装します。こちらは2つのステップがあります。getStaticPropsまたはgetServerSideProps内で、必要なロケールと名前空間(JSON)を読み込み対象に設定します。undefined型と判定されます。それによるエラー回避のため、!を付与して値の存在を明示しています。serverSideTranslations(locale!,['common']))}});そして、各コンポーネント内で言語切替を実装します。(<h1>{t('Common.title')}</h1>);}serverSideTranslationsのカスタマイズserverSideTranslationsの引数によって、ユースケースに沿ったカスタマイズが可能となります。初期表示対象のロケールです。指定されたロケールは、デフォルトでロード対象となります。通常はgetStaticPropsまたはgetServerSidePropsの引数として受け取れるlocaleを指定して、リクエストごとに可変となるようにします。任意ロード対象JSONの名前空間の配列です。指定された全ての名前空間がロード対象となります。未指定か空配列が指定された場合は、どの名前空間もロードしません。通常は、画面内で利用する名前空間を全て指定します。next-i18nextでは名前空間(JSON)をコンポーネントごとに分割することが推奨されます。各コンポーネントでは、単一の名前空間を読み込めるようになっています。分割しない場合、該当ページで利用しないメッセージも読み込まれることになり、パフォーマンスに影響します。下記は、フッター用の名前空間を定義した例です。指定したオブジェクトの内容で、next.config.js内に定義したi18n設定をオーバーライドします。初期ロード対象のロケールを追加指定します。デフォルトでは、第1引数で指定した初期表示対象ロケールのみがロード対象となります。URL内のロケール情報に関わらず、getFixedT経由で特定ロケールを常に使用する場合などで指定できます。(<><h1>{t('Common.title')}</h1><p>{ja('Common.title')}</p></>);}英語ページへアクセスした場合、以下の表示となります。Next.js構成を利用せずにnext-i18nextを利用する場合URLのロケール情報をカスタマイズしたいなどの理由で、next.config.jsにi18nを指定しない場合を挙げられます。アプリ全体ではなく、ページごとにi18n設定を読み込むという方法です。Next.jsで組み込める構成は国際的な標準であることにご留意ください。この構成の場合、localeを通したロケール情報の取得はできなくなりますが、params経由などで任意の値を初期ロケールに指定することができます。serverSideTranslations(String(params?.locale),['common']))}});おわりにnext-i18nextで多言語対応を行う方法についてご紹介しました。手軽に多言語対応の組み込みとカスタマイズができるライブラリですので、ぜひご利用ください。