Next.js for Drupalを試してみました。
https://next-drupal.org/
以下の「Get Started」の通りにすすめることで、Next.jsとDrupalを連携させることができました。
https://next-drupal.org/learn/quick-start
また、以下の記事で、ファセット検索の実装例が紹介されています。
https://next-drupal.org/guides/search-api
本記事では、特に後者のファセット検索の実現に関する備忘録です。
Search API#
以下、Serverとindexを作成します。
公式サイトでは以下が参考になります。
https://www.drupal.org/docs/contributed-modules/search-api
日本語サイトでは以下が参考になります。
https://www.acquia.com/jp/blog/introduction-to-search-api-1
Serverの作成#
indexの作成#
今回、test_index_20230417というインデックスを作成します。
さらに、タイトルをフィールドとして追加しました。
その後、インデクシングを行います。
JSON:API#
上記を行ったところで、キャッシュをクリアします。
/admin/config/development/performance
その後、以下のURLからエンドポイントにアクセスできるようになります。
/jsonapi/index/test_index_20230417
以下のようなクエリパラメータによって、検索結果の絞り込みができます。
/jsonapi/index/test_index_20230417?filter[title]=更新したタイトル
Facets#
以下にアクセスします。
/admin/config/search/facets
「Add facet」を押して、先に作成したインデックスを選択します。
次の画面において、Widgetの「JSON:API Search API」を選択します。
その後、キャッシュをクリアして、先程のエンドポイントにアクセスしてみます。
/jsonapi/index/test_index_20230417
以下のように、facetsという項目が追加されます。これを使って、フロントエンド側からファセット検索を実現することができます。
まとめ#
Next.jsとの連携例は、以下のリポジトリでソースコードが公開されています。
https://github.com/chapter-three/next-drupal/blob/main/examples/example-search-api/pages/advanced.tsx
自分で設定したインデックスやフィールドに書き換えることで、以下のデモページのような検索ページを作成することができました。
https://example-search-api.next-drupal.org/advanced
JSON:APIモジュールを用いたファセット検索などで参考になりましたら幸いです。