Overview
I tried out Next.js for Drupal.
By following the “Get Started” guide, I was able to integrate Next.js with Drupal.
https://next-drupal.org/learn/quick-start
Additionally, the following article introduces an implementation example of faceted search.
https://next-drupal.org/guides/search-api
This article focuses on notes about implementing the latter faceted search.
Search API
Create a Server and index as follows.
The official site provides the following reference.
https://www.drupal.org/docs/contributed-modules/search-api
For Japanese sites, the following is a useful reference.
https://www.acquia.com/jp/blog/introduction-to-search-api-1
Creating a Server
Creating an Index
This time, an index called test_index_20230417 is created.
Furthermore, title was added as a field.
After that, indexing is performed.
JSON:API
After completing the above, clear the cache.
/admin/config/development/performance
Then, the endpoint becomes accessible from the following URL.
/jsonapi/index/test_index_20230417
Search results can be filtered using query parameters as follows.
/jsonapi/index/test_index_20230417?filter[title]=更新したタイトル
Facets
Access the following.
/admin/config/search/facets
Click “Add facet” and select the index created earlier.
On the next screen, select “JSON:API Search API” for the Widget.
Then, clear the cache and access the endpoint again.
/jsonapi/index/test_index_20230417
As shown below, a facets item is added. This can be used to implement faceted search from the frontend.
Summary
An integration example with Next.js has its source code published in the following repository.
By replacing the index and fields with those I configured myself, I was able to create a search page like the following demo page.
https://example-search-api.next-drupal.org/advanced
I hope this serves as a useful reference for faceted search using the JSON:API module.