How to customize search bar in Next.js - GeeksforGeeks

22 Oct, 2021
In this article, we will learn How we can add a customized search bar 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 customized search bar 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 from algolia using the API keys and algoliasearch module. Then we will create our customized search bar.
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 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 4: Now we will create a custom search bar for our app.  For this, we will create a new file inside a new component folder with the below content. 
Javascript
import { connectSearchBox } from 'react-instantsearch-dom';  function SearchBar({ currentRefinement, isSearchStalled, refine }) {    return (            <form noValidate action="" role="search">        <input          value={currentRefinement}          onChange={event => refine(event.currentTarget.value)}          placeholder="Search any term"          style={{ height:'40px',width:'280px',borderRadius:"10px"}}          title='Search bar'        />       </form>        )}  export default connectSearchBox(SearchBar);
Step 5: Now we can use the API to add the customized search in NextJs Project.  After that to use our customized search bar we are going to add the below code in the index.js file.
Javascript
// Importing modulesimport algoliasearch from "algoliasearch/lite";import { InstantSearch, SearchBox, Hits }     from "react-instantsearch-dom";import SearchBar from "../component/CustomSearch";  const searchClient = algoliasearch(  APPLICATION_API_KEY,  SEARCH_ONLY_API_KEY,);  export default function CustomizedSearch() {  return (    <>      <InstantSearch         searchClient={searchClient}         indexName="gfg_dev">          {/* Adding Search Box */}        <SearchBar/>          {/* Adding Data */}        <Hits />      </InstantSearch>    </>  );}
You can also add styling using CSS in our custom search bar.
Steps to run the application: Run the app using the below command in the terminal.
npm run dev
Next.js
NodeJS-Questions
JavaScript
Node.js
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Installation of Node.js on Linux
How to update Node.js and NPM to next version ?
Node.js fs.readFileSync() Method
Node.js fs.writeFile() Method
Node.js fs.readFile() Method