Next.jsのJSSサンプルアプリにおける国際化

Next.jsサンプルアプリを基に作成されたJSS Next.jsアプリケーションは、国際化を有効にするための設定(i18n)が事前に設定されています。

JSS Next.jsアプリケーションはサブパスルーティングを用いた 国際ルーティング をサポートしています。ドメインルーティングにはカスタム実装が必要です。

Next.js JSSアプリケーションのソースディレクトリには、アプリケーションがサポートするlocalesおよびdefaultLocaleの定義next.config.jsが含まれています:

i18n: { locales: 'en', 'da-DK', defaultLocale: packageConfig.language, }

• localesアプリケーションでサポートしたいすべての言語であり、Sitecoreで定義されている言語と一致(または少なくともそのサブセット)でなければなりません。このNext.jsの設定オプションにはいくつかの 制限があります。
• defaultLocaleは、ロケールが接頭辞で始まらないパスを訪れる際に使われるローカです。値は、config.languageオプションのためにファイルpackage.jsonで設定した値に設定されます。

Next.jsは追加のi18n機能を提供せず、どのコンテンツ翻訳ライブラリを使うべきかについて意見を述べていません。コンテンツのローカライズを有効にするために、JSS Next.jsアプリはnext-localizationライブラリを使用します。アプリコンポーネント(定義src/pages/_app.tsxファイル)では、JSS Next.jsアプリケーションがnext-localizationモジュールからi18nプロバイダーを取り込み、Next.jsが提供する値のプロパティpageProps.locale、dictionaryのプロパティを使って初期化します。これはSitecore辞書サービスのデータです。これらの物件にはページ・プロップス・ファクトリーがあります:

function App({ Component, pageProps }: AppProps): JSX.Element { const { dictionary, ...rest } = pageProps;

return ( <Component {...rest} /> ); }

動的ルートの場合、JSS Next.jsアプリはSitecoreSitemapFetcherクラスのインスタンスを用いて、localeフィールドの取得を処理し、経路の静的パスを準備する際に関数getStaticPathsを用います。