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ライブラリを使用します。 src/pages/_app.tsxファイルで定義されているAppコンポーネントでは、JSS Next.jsアプリケーションはnext-localizationモジュールからi18nプロバイダをインポートし、Next.jsによって提供される値でpageProps.localeプロパティを使用し、Sitecore Dictionary Servicesからのデータで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クラスのインスタンスを使用して、localegetStaticPaths関数 .

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;