Overview

I tried Next.js for Drupal.

next-drupal.org

By following the "Get Started" guide, I was able to integrate Next.js with Drupal.

next-drupal.org

Additionally, the following article introduces an implementation example for faceted search.

next-drupal.org

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:

Search API

This guide contains documentation for the Search API module for Drupal 8. This module is designed to replace the core "Search" module with a flexible framework that can be easily customized and extended. For a detailed description, refer to the project page linked above.

Drupal.org

For a Japanese-language reference:

DrupalのSearch API入門概要と始め方【前編】

Search APIの入門記事として、Search APIの基本操作をご紹介します。

Acquia

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,
	...

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"
    }
  }
}