多言語のコンテンツをサイトで利用する

公開日 :

前回の記事では、コンテンツ管理で多言語のデータの持ち方の設定を紹介しました。それでは実際に表示をする際にはどういう動きをしているでしょうか？Next.js のプロジェクトを参照しながら確認をしていきます。

ルーティングに関して

まず最初に、Next.js には標準で多言語を扱う際のルーティングが用意されています。

言語ごとにドメインを変更したり、サブディレクトリで言語の切り替えをすることが可能となっています。XM Cloud のサンプルに関して、 next.config.js のファイルは以下のように記述しています（コメントは削除しています）。

  i18n: {
    locales: ['en'],
    defaultLocale: jssConfig.defaultLanguage,
  },

ロケールとしては英語の指定をしているだけで、他の言語の定義がありません。この設定を以下のように変更します。

  i18n: {
    locales: ['en', 'ja-JP'],
    defaultLocale: jssConfig.defaultLanguage,
    localeDetection: false,
  },

言語の部分を増やして、localeDetection と設定しました。localeDetection はブラウザのロケールを見て切り替える機能ですが、今回はオフにして進めていきます。まずはローカルの環境で動かしてみます。

random desc

URL にロケールを入れると、日本語のコンテンツが表示されるようになりました。

Vercel に展開する

上記の変更をしたコードを、GitHub に展開をして改めて Vercel でサイトのビルドを実行します。完了すると、URL にロケールを入れて対象となる言語を表示することができました。

random desc

まとめ

ロケールに関しての部分は、Sitecore 固有の実装ではなく Next.js が持っているルーティングの仕組みを利用していることの確認ができました。

参考情報