Next.js 用の JSS サンプル アプリでの国際化

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 library を使用します。src/pages/_app.tsx ファイルで定義される App コンポーネントで、JSS Next.js アプリケーションは next-localization モジュールから i18n プロバイダーをインポートし、Next.js によって提供される値を含むプロパティ pageProps.locale および Sitecore ディクショナリ サービスからのデータを含む dictionary を使用して初期化します。これらのプロパティは Page Props Factory によって入力されます。

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

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

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

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;