JSS Next.js用サンプル・アプリケーションでの国際化

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

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

Next.js JSSアプリケーションのソースディレクトリにあるファイルnext.config.jsには、アプリケーションとdefaultLocaleでサポートされているlocalesの定義が含まれています。

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

Next.jsは追加のi18n機能を提供しておらず、どのコンテンツ翻訳ライブラリを使用する必要があるかについて規定しているわけではありません。コンテンツのローカライゼーションを有効にするために、JSS Next.jsアプリはnext-localizationライブラリを使用します。 src/pages/_app.tsxファイルで定義されているアプリ コンポーネントでは、JSS Next.jsアプリケーションはnext-localizationモジュールからi18nプロバイダーをインポートし、Next.jsによって提供される値を持つpageProps.localeプロパティとSitecoreディクショナリ サービスからのデータを持つdictionaryを使用して初期化します。プロパティは、Page Propsファクトリによって入力されます。

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

  return (
    <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
      <Component {...rest} />
    </I18nProvider>
  );
}

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

import { useI18n } from 'next-localization';

const MultilingualComponent = (): JSX.Element => {
  const { t, locale } = useI18n();

  return (
    <div>
      <p>Translated text: {t('custom-key')}</p>
      <p>The current language is: {locale()}</p>
    </div>
  );
};

export default MultilingualComponent;