Sitecore#Next.js

Sitecore Search witn Next.js

ここでは、Sitecore Search のサンプルを Next.js の初期設定から作り上げていきます。なお、XM Cloud の Headless SXA が Next.js Pages Router をベースとして現在は提供していることもあり、ここでのサンプルも同じように Pages router を利用して作成していきます。

今回は日本語と英語のコンテンツに対する検索サイトを作るのを前提とします。

Next.js のプロジェクトを作成する

今回は XM Cloud の Next.js のバージョンになるべく近いバージョンということで、このドキュメント作成時では 14.2.18 のバージョンを選択して作成をします。

sh
Image

パッケージを追加する

Sitecore Search の SDK で提供されているパッケージをインストールします。これの手順に関しては、以下のページで提供されています。

ドキュメントを参考にしながら以下のように進めていきます。

sh
sh
sh
.sc-search-settings.json
package.json

これで、Sitecore Search で必要となるパッケージの設定が完了しました。

言語切替の実装

言語切替コンポーネントの作成

このサンプルは英語、日本語のコンテンツを対象とした検索サービスを作成していきます。

まず、サイトで利用する言語に関する定義を、src/data/locales.ts のファイルにて定義します。

src/data/locales.ts

続いて、アプリケーション全体で言語設定を共有することができるように、src/contexts/languageContext.ts のファイルを作成してコンテキストを共有できるようにします。

src/contexts/languageContext.ts

また、言語に関する情報をブラウザのローカルストレージを利用して保持するために、src/lib/useLocalStorage.ts のファイルを作成します。

src/lib/useLocalStorage.ts

最後に、言語切替コンポーネントとして src/components/LocaleSelector.tsx のファイルを以下のように作成します。

src/components/LocaleSelector.tsx

これでコンポーネントの準備ができました。

コンポーネントを実装する

作成をした言語切替コンポーネントを、実際に動くように実装をしていきます。まず、作成をした各種コンポーネントを src/pages/_app.tsx に対して実装をしていきます。以下が変更後のコードとなります。

src/pages/_app.tsx

実際のページに表示するために、トップページのコンテンツを以下のコードに変更します。

src/pages/index.tsx

実行結果は以下のようになり、言語の切替を実行すると、ローカルストレージの lang に対して選択した言語の情報が保存されます。

Image

最初の Widgets を追加

Next.js 側の準備が完了した状況ですので、今度は Widget を利用して検索ができるように作成をしていきます。

PreviewSearch の追加

まず最初に、PreviewSearch の Widget をトップページに実装していきます。

sh
Image
          • index.tsx
      • index.tsx
tailwind.config.ts

これで PreviewSearch の Widget の準備ができました

Widget に関する設定を追加する

作成をした Widget を Next.js で利用できるようにするために、以下のコードの変更を進めていきます。

Sitecore Search に接続するための環境変数として、 .env.local ファイルを作成して値を設定します。

.env.local

上記のファイルが準備できたところで、 src/pages/_app.tsx に対して必要なコードを追加していきます。

結果は以下の通りです。

src/pages/_app.tsx

これでウィジットを配置する準備ができました。まず、 src/pages/index.tsx にウィジットを配置します。

src/pages/index.tsx

実行結果は以下のようになります。スタイルシートなど何も未調整のため、縦に検索結果が並んでいますが、正しく動作しています。

Image

Header の作成

このサンプルサイトの Header を作成するにあたって、左上にロゴ、中央に検索ボックス、右側に言語切り替えを配置したヘッダーを作成していきます。

Header コンポーネントの追加

まず Header に関しては以下のコンポーネントを配置します。

src/components/Header.tsx

上記のヘッダーの追加に合わせて、Next.js のファイルを変更します。まず、 src/pages/_app.tsx で Header を読み込む形に変更をします。

src/pages/_app.tsx

続いて src/pages/index.tsx のページに追加していた PreviewSearch を削除します。

src/pages/index.tsx

最後に、PreviewSearch の横幅が 800 で固定されているため、このサイズを変更します。

src/widgets/PreviewSearchBasic/index.tsx
Image

ダークモードの追加

Sitecore Search の Widget はダークモードにも対応しています。そこで、この Next.js のサンプルもダークモードに対応していきます。

powershell
tailwind.config.ts
src/pages/_app.tsx
src/components/mode.tsx
src/components/Header.tsx

以下のようにボタンをクリックするとモードが切り替わるようになりました。

Image

検索結果のページ作成

PreviewSearch の検索ボックスではなく、検索結果をページとして表示をするためのページを追加します。今回は、src/pages/index.tsx のファイルをコピーして、src/pages/search/index.tsx を作成します。

PreviewSearch の変更

上記まで実装していた PreviewSearch のウィジットは、Input ボックスに文字を入力すると、その中のキーワードを利用して検索結果を表示する仕組みとなっていました。これを変更して、Form のタグを組み合わせて次のページに遷移するようにしていきます。

まず、Form のタグを追加します。

src/widgets/PreviewSearchBasic/index.tsx

続いて Form に Submit した場合の handleSubmit を以下のように実装します。なお、いくつかインポートで追加しているため、その部分も表示すると以下のような形です。

src/widgets/PreviewSearchBasic/index.tsx

上記の変更をすることで、キーワードを検索結果のページに渡せるようになりました。検索キーワードの確認をするために、コピーをして用意したファイル src/pages/search/index.tsx を変更します。

src/pages/search/index.tsx

キーワードを /search のページで取得することができました。

Image

SearchResult の追加

今回のサンプルページでは、SDK が提供しているウィジットの Basic Search Results を追加します。

ウィジットの追加は、コマンドを実行します。

sh

今回、選択をするウィジットは SearchResults を選択します。

Image

ウィジットと合わせて、ウィジットが利用する必要なファイルが追加されます。

          • index.tsx
          • index.tsx
          • index.tsx
          • index.tsx
          • index.tsx
          • index.tsx
          • index.tsx
      • index.tsx

追加されたウィジットを Search のページで利用するために、コードを以下のように変更をします。

src/pages/search/index.tsx

実際にキーワードを入力して実行をします。この段階では、結果が 0 件となっています。エラー画面として表示されているのは、sorting option 'featured_desc' not configured というメッセージになります。

Image

この原因は、 Sitecore Search の表示順に、この おすすめ順 となる設定が含まれていないため、結果を取得できていない形となります。

Image

今回は新しく作成する前に、動作させるのが目的となっているので、並び順を title_ascending に変更をします。

src/widgets/SearchResults/index.tsx

変更したあと、あらためて実行をすると検索結果が表示されました。

Image

Build エラーの修正

上記のように検索が動作するようになりましたが、build を実行するとエラーが表示されます。

Image

これは標準で提供されるウィジットのインターフェイスで any を利用しているためです。以下のファイルを修正していきます。

src/widgets/components/ArticleHorizontalCard/index.tsx
src/widgets/components/Filter/index.tsx
examples/sitecore-search-pages/src/widgets/components/SortOrder/index.tsx

上記の変更をしたあと、あらためて build を実行すると今度は SearchResults のウィジットでエラーが発生します。これに関しては、url と source_id を必須の値とすることで build を完了させることができます。

src/widgets/SearchResults/index.tsx

エラーをこれで解消することができ、無事 build が完了します。

コンテンツページの作成

検索サイトでは、検索結果をクリックすると対象のページを表示するように構成をしますが、今回のサンプルサイトでは対象となるページについて Sitecore Search が持っている情報を確認できるページを用意します。

検索結果のページの準備

ID を利用してページを表示するように構成をするため、まず以下のページを作成しました。

src/pages/detail/[id]/index.tsx

実際に、http://localhost:3000/detail/test という URL でアクセスをした際には、以下のような結果が表示されています。

Image

検索結果を取得する

今回は Sitecore Search SDK のコードを参考にして詳細ページを作成していきます。サンプルは以下のコードが Widget のコードになります。

今回はページ自体を以下のように書き換えています。

src/pages/detail/[id]/index.tsx

また、このページで利用する検索結果のインターフェイスとして利用するために、ArticleModel に export を追加しました。

src/widgets/SearchResults/index.tsx

また、検索結果の画像を Next.js で利用できるようにするために、 next.config.mjs のファイルに以下のコードを追加しています。

/

next.config.mjs

上記の作業の結果、ID を利用して結果を表示することが可能となりました。

リンクの調整

結果のページに対してアクセスをすることができるように、PreviewSearch で表示された項目をクリックしたときのページの遷移、そして SearchResults の結果で表示されている ArticleHorizontalCard にも同様にクリックをしたときの動作を追加します。

src/widgets/PreviewSearchBasic/index.tsx
src/widgets/components/ArticleHorizontalCard/index.tsx

これで、検索結果を表示するページにリンクを貼ることができました。

まとめ

今回は、バニラな Next.js + Tailwind CSS の環境に対して、Sitecore Search の検索結果を表示するための手順を確認しました。ウィジットを追加して、Next.js で表示できるようにする、という手順を進めていった形です。

ここで紹介をしたコードに関して、フッターを追加したりしている部分もありますが、以下のサイトで全てのコードを共有しています。

参考情報