如何使用 Algolia 在 Next.js 中添加过滤器？

在本文中，我们将学习如何使用 Algolia 在 NextJS 项目中添加过滤器。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：首先要添加我们的过滤器，我们将在 algolia 中创建一个帐户，使我们能够在几毫秒内搜索内容。之后，我们将获得稍后将在应用程序中使用的 API 密钥。然后我们将创建一个新的索引来上传我们的数据。在我们应用程序的主页上，我们将使用 API 密钥和 algoliasearch 模块从 algolia 获取带有过滤器小部件的数据。

创建 NextJS 应用程序：

第 1 步：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

第 2 步：要在我们的项目中添加 Algolia 搜索，我们将安装两个模块：

npm install algoliasearch react-instantsearch-dom

项目结构：它将如下所示。

第 3 步：设置 Algolia。 Algolia 使开发人员能够使用可在几毫秒内提供相关内容的 API 构建下一代应用程序。所以要使用 algolia 首先创建一个免费帐户并获取该帐户的 API 密钥。

1. 获取 API 密钥转到设置 > API 密钥

2. 之后创建索引并上传要过滤的数据。您可以上传 JSON、CSV 格式的数据或使用他们的 API。

对于此示例，我正在上传以下数据。

Title, Tag,    Day
GFG1, python,  Monday
GFG2, java,    Tuesday
GFG3, CSS,     Wednesday
GFG4, HTML,    Thursday
GFG5, react,   Friday
GFG6, nextjs,  Saturday

添加复选框过滤器：您可以使用 algolia 的 RefinementList 小部件轻松添加复选框过滤器。使用此小部件，用户可以根据构面值过滤数据集。该小部件仅显示与当前搜索上下文最相关的构面值。现在我们将在index.js文件中添加以下代码。在下面的代码中，首先，我们正在导入我们的 RefinementList，然后，我们使用 Title 属性调用我们的 RefinementList。

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, RefinementList , Hits } from 
    "react-instantsearch-dom";
  
const searchClient = algoliasearch(
  "API_KEY",
  "SEARCHABLE_KEY",
);
  
export default function SearchBar() {
  return (
    <>
      
        
        
      
    
  );
}

运行应用程序的步骤：使用以下代码运行应用程序。

npm run dev

输出：

添加 Onclick 过滤器：您可以使用 algolia 的 Menu 小部件轻松添加 onclick 过滤器。使用此小部件，用户可以根据构面值过滤数据集。该小部件仅显示与当前搜索上下文最相关的构面值。现在我们将在index.js文件中添加以下代码。在下面的代码中，首先，我们正在导入我们的菜单，然后，我们使用 Title 属性调用我们的菜单。

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, Menu , Hits } from "react-instantsearch-dom";
  
const searchClient = algoliasearch(
  "API_KEY",
  "SEARCHABLE_KEY",
);
  
export default function SearchBar() {
  return (
    <>
      
        
        
      
    
  );
}

运行应用程序的步骤：使用以下代码运行应用程序。

npm run dev

输出：

添加下拉过滤器：您可以使用 algolia 的 MenuSelect 小部件轻松添加下拉过滤器。使用此小部件，用户可以根据构面值过滤数据集。该小部件仅显示与当前搜索上下文最相关的构面值。现在我们将在 index.js 文件中添加以下代码。在下面的代码中，首先，我们正在导入我们的 MenuSelect，然后，我们使用 Title 属性调用我们的 MenuSelect。

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, MenuSelect , Hits } from "react-instantsearch-dom";
  
const searchClient = algoliasearch(
  "API_KEY",
  "SEARCHABLE_KEY",
);
  
export default function SearchBar() {
  return (
    <>
      
        
        
      
    
  );
}

运行应用程序的步骤：使用以下代码运行应用程序。

npm run dev