How to add Filters in Next.js using Algolia ?

In this article, we will learn How we can add filters in the NextJS project using Algolia. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.

Approach: To add our filters first we are going to create an account in algolia that enables us to search content in milliseconds. After that, we will get the API keys that we will use later in our app. Then we will create a new index to upload our data. On the homepage of our app, we will fetch the data with the filter widgets from algolia using the API keys and algoliasearch module.

Create NextJS Application:

Step 1: You can create a new NextJs project using the below command:

npx create-next-app gfg

Step 2: To add Algolia search in our project we are going to install two modules:

npm install algoliasearch react-instantsearch-dom

Project Structure: It will look like the following.

Step 3: Setting up Algolia. Algolia enables developers to build next-generation apps with APIs that deliver relevant content in milliseconds. So to use algolia first create a free account and get the API keys of that account.

1. To get the API keys Go to settings > API Keys

2. After that create an index and upload the data that you want to filter. You can upload the data in JSON, CSV format or by using their API.

For this example, I am uploading the below data.

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

Adding Checkbox Filter: You can easily add checkbox filters using the RefinementList widget of algolia. With this widget, the user can filter the dataset based on facet values. The widget only displays the most relevant facet values for the current search context. Now we will add the below code in our index.js file. In the below code First, we are importing our RefinementList and after that, we are calling our RefinementList with the Title attribute.

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 (
    <>
      <InstantSearch
        searchClient={searchClient}
        indexName="gfg_dev">
        <RefinementList attribute="Title" />
        <Hits />
      </InstantSearch>
    </>
  );
}

Step to run the application: Run the app using the below code.

npm run dev

Output:

Adding Onclick Filter: You can easily add onclick filters using the Menu widget of algolia. With this widget, the user can filter the dataset based on facet values. The widget only displays the most relevant facet values for the current search context. Now we will add the below code in our index.js file. In the below code First, we are importing our Menu and after that, we are calling our Menu with the Title attribute.

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 (
    <>
      <InstantSearch
        searchClient={searchClient}
        indexName="gfg_dev">
        <Menu attribute="Title" />
        <Hits />
      </InstantSearch>
    </>
  );
}

Step to run the application: Run the app using the below code.

npm run dev

Output:

Adding Dropdown Filter: You can easily add dropdown filters using the MenuSelect widget of algolia. With this widget, the user can filter the dataset based on facet values. The widget only displays the most relevant facet values for the current search context. Now we will add the below code in our index.js file. In the below code First, we are importing our MenuSelect and after that, we are calling our MenuSelect with the Title attribute.

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 (
    <>
      <InstantSearch
        searchClient={searchClient}
        indexName="gfg_dev">
        <MenuSelect attribute="Title" />
        <Hits />
      </InstantSearch>
    </>
  );
}

Step to run the application: Run the app using the below code.

npm run dev

Output: