How to add Search Feature in Next.js using Algolia ?

Adding a search feature to your Next.js application can greatly enhance user experience by providing fast and relevant search results. Algolia is a powerful search-as-a-service solution that integrates seamlessly with Next.js to offer instant, full-text search capabilities. In this article, we will learn How we can search features in the NextJS project using Algolia.

Approach

To add a search feature 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 search widget from algolia using the API keys and algoliasearch module.

Steps to Implement Search in Next.js 

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

npx create-next-app gfg

Step 2: Move to the project directory

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

The updated dependencies in the package.json are:

"dependencies": {
    "algoliasearch": "^4.24.0",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-instantsearch-dom": "^6.40.4",
    "react-tweet-embed": "^2.0.0"
}

Step 4: Setting up Algoli

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

Step 5: Now we can use the API to add the search feature in NextJs Project.  After that to use our search bar we are going to add the below code in index.js file.

// Importing modules
import algoliasearch from "algoliasearch/lite";
import { InstantSearch, SearchBox, Hits }
    from "react-instantsearch-dom";

const searchClient = algoliasearch(
  APPLICATION_API_KEY,
  SEARCH_ONLY_API_KEY,
);

export default function SearchBar() {
  return (
    <>
      <InstantSearch 
        searchClient={searchClient} 
        indexName="gfg_dev">

        {/* Adding Search Box */}
        <SearchBox />

        {/* Adding Data */}
        <Hits />
      </InstantSearch>
    </>
  );
}

Step to run the application: Now to run the below code in the terminal to start the app in the development server:-

npm run dev

Output:

Conclusion

Integrating Algolia with Next.js provides a robust and responsive search feature for your application. By configuring Algolia, indexing your data, and implementing a search component, you can deliver a fast and user-friendly search experience. Customize further with advanced features and UI enhancements to optimize your search functionality.