如何使用 Algolia 在 Next.js 中添加分页？

Algolia 是一个高效的搜索引擎，可以轻松地将其集成到 Next.js 应用程序中。本文将探讨如何使用 Algolia 与 Next.js 实现分页搜索。我们将介绍如何连接 Algolia，如何实现基本的搜索和分页功能以及如何进行自定义。

连接 Algolia

首先，我们需要将 Algolia 添加到我们的 Next.js 应用程序中。我们可以使用 algoliasearch 包来完成此操作。在我们的 Next.js 应用程序的顶部导入此包，然后使用我们的 Algolia 凭据创建一个客户端对象。

import algoliasearch from 'algoliasearch';

const client = algoliasearch(appId, apiKey);
const index = client.initIndex('indexName');

使用 initIndex 方法创建了一个 Algolia 索引对象，该对象可以直接调用 Algolia API 进行搜索。

实现基本搜索和分页

接下来，我们需要实现基本的搜索和分页功能。我们可以通过使用 Query 和 Page 参数来实现分页搜索。Query 参数指定搜索查询字符串，Page 参数指定当前的分页。

const search = (query, page) =>
  index.search(query, {
    page: page,
  });

我们可以创建一个异步函数 search，该函数使用 index.search 方法在 Algolia 上执行查询。我们将提供查询字符串和当前页作为参数。

现在，我们可以在我们的搜索页面组件中定义基本的搜索和分页功能。而这也是一个标准的 Next.js页面，但需要加上搜索表单和分页，如下所示：

import { useState } from 'react';

export default function Search() {
  const [query, setQuery] = useState('');
  const [page, setPage] = useState(0);
  const [result, setResult] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await search(query, 0);
    setResult(res);
  };

  const handlePageChange = async (i) => {
    const res = await search(query, i);
    setResult(res);
    setPage(i);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>

      {result && (
        <ul>
          {result.hits.map((hit) => (
            <li key={hit.objectID}>{hit.title}</li>
          ))}
        </ul>
      )}

      <div>
        {result && [...Array(result.nbPages).keys()].map((i) => (
          <button key={i} onClick={() => handlePageChange(i)}>{i + 1}</button>
        ))}
      </div>
    </div>
  );
}

在这里，我们将查询字符串和当前页保存在组件状态中，并在表单提交时调用 search 函数进行搜索。我们还在组件中创建了一个处理页面更改的函数，并在结果下方创建了一个分页组件。

自定义搜索界面

最后，我们可以根据我们的需求自定义搜索UI。search 函数接受一些可选参数，我们可以使用它们来自定义搜索。例如，我们可以使用 filters 参数来实现基于类别或标签的搜索。

const search = (query, page, filters) =>
  index.search(query, {
    page: page,
    filters: filters,
  });

我们还可以通过调用 setSettings 方法来自定义 Algolia 索引的设置。

index.setSettings({
  searchableAttributes: ['title', 'description'],
});

我们可以使用 sortableAttributes 参数实现可排序的搜索结果，并在其中使用 hitPerPage 参数控制每页显示的搜索结果。

const search = (query, page, filters, sort) =>
  index.search(query, {
    page: page,
    filters: filters,
    hitsPerPage: 5,
    sort: sort,
  });

在搜索页面的 UI 上，我们可以添加选择器或排序输入，以便用户能够自定义搜索结果的排序方式。

总结

本文介绍了如何在 Next.js 应用程序中使用 Algolia 实现搜索和分页。我们详细介绍了如何创建 Algolia 客户端对象和链接 Algolia 索引，以及如何使用 Query 和 Page 参数实现分页搜索。我们还介绍了如何自定义 Algolia 索引和搜索结果来实现更多功能。