Overview

I tried Next.js for Drupal.

https://next-drupal.org/

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 for faceted search.

https://next-drupal.org/guides/search-api

This article is my notes specifically on implementing the latter, faceted search.

Search API

Create a Server and index as follows.

The official site provides the following as a reference:

https://www.drupal.org/docs/contributed-modules/search-api

For a Japanese-language reference:

https://www.acquia.com/jp/blog/introduction-to-search-api-1

Creating a Server

Creating an Index

Here, we create an index named test_index_20230417.

Additionally, I added the title as a field.

After that, perform indexing.

JSON:API

After completing the above, clear the cache.

/admin/config/development/performance

Then, the endpoint becomes accessible at the following URL.

/jsonapi/index/test_index_20230417

Search results can be filtered using query parameters like the following:

/jsonapi/index/test_index_20230417?filter[title]=更新したタイトル

{
  "jsonapi": {
    "version": "1.0",
    "meta": {
      "links": {
        "self": {
          "href": "http://jsonapi.org/format/1.0/"
        }
      }
    }
  },
  "data": [
    {
      "type": "node--service",
      "id": "82a34c35-f1b7-49eb-81ac-f15d0deac22c",
      "links": {
        "self": {
          "href": "https://xxx/jsonapi/node/service/82a34c35-f1b7-49eb-81ac-f15d0deac22c?resourceVersion=id%3A5075"
        }
      },
      "attributes": {
        "drupal_internal__nid": 4,
        "drupal_internal__vid": 5075,
        "langcode": "en",
        "revision_timestamp": "2023-04-12T08:19:00+00:00",
        "revision_log": null,
        "status": true,
        "title": "更新したタイトル",
        "created": "2023-04-11T02:09:35+00:00",
        "changed": "2023-04-12T08:19:00+00:00",
        "promote": false,
        "sticky": false,
        "default_langcode": true,
        "revision_translation_affected": true,
	...

Facets

Access the following:

/admin/config/search/facets

Press “Add facet” and select the index you created earlier.

On the next screen, select “JSON:API Search API” for the Widget.

After that, clear the cache and access the endpoint again.

/jsonapi/index/test_index_20230417

A facets item has been added as shown below. This can be used to implement faceted search on the frontend side.

{
  "jsonapi": {
    "version": "1.0",
    "meta": {
      "links": {
        "self": {
          "href": "http://jsonapi.org/format/1.0/"
        }
      }
    }
  },
  "data": [...],
  "meta": {
    "count": 2,
    "facets": [
      {
        "id": "title_20230417",
        "label": "Title",
        "path": "title_20230417",
        "terms": [
          {
            "url": "https://xxx/jsonapi/index/test_index_20230417?filter%5Btitle_20230417%5D=%E5%B9%B3%E8%B3%80%E8%AD%B2%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96",
            "values": {
              "value": "平賀譲デジタルアーカイブ",
              "label": "平賀譲デジタルアーカイブ",
              "active": false,
              "count": 1
            }
          },
          {
            "url": "https://xxx/jsonapi/index/test_index_20230417?filter%5Btitle_20230417%5D=%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%9F%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB",
            "values": {
              "value": "更新したタイトル",
              "label": "更新したタイトル",
              "active": false,
              "count": 1
            }
          }
        ]
      }
    ]
  },
  "links": {
    "self": {
      "href": "https://xxx/jsonapi/index/test_index_20230417"
    }
  }
}

Summary

An example of integration with Next.js has its source code published in the following repository:

https://github.com/chapter-three/next-drupal/blob/main/examples/example-search-api/pages/advanced.tsx

By replacing it with the index and fields you configured yourself, you can 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 implementing faceted search using the JSON:API module.