How to customize search bar in Next.js
Last Updated :
29 Jul, 2024
Customizing a search bar in Next.js enhances user experience by providing fast, efficient content search. This guide covers setting up Algolia, fetching data, and integrating a custom search bar.
In this article, we will learn How we can add a customized search bar in the NextJS project using Algolia.
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.
Steps to Customize the Search Bar in Next.js App
Step 1: You can create a new NextJs project using the below command:
npx create-next-app gfg
Step 2: Switch to the project directory
cd gfg
Step 3: To add Algolia search in our project we are going to install two modules:
npm install algoliasearch react-instantsearch-dom
Project Structure:

The updated dependencies in the package.json file are
"dependencies": {
"algoliasearch": "^4.24.0",
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
"react-instantsearch-dom": "^6.40.4"
}
Step 4: 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 5: 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
// Filename - compoenents/CustomSearch.js
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 6: 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
// Filename - pages/index.js
// Importing modules
import 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
Output:
Similar Reads
How to Customize Pagination in Next.js ?
In this article, we will learn How we can add customized pagination 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 you
3 min read
How to customize filters in Next.js ?
In this article, we will learn How we can add customized 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 N
3 min read
How to Create a Sitemap in Next.js 13?
The Sitemap is an XML file that notifies search engines like Google about the structure and content of the website. This would helps search engines to discover and index the pages efficiently which improve the website SEO (Search Engine Optimization). PrerequisitesNode JSReact JSNext JSThese are the
3 min read
How to add custom filter in search Box in ReactJS?
The custom filter means adding our own business login to filter the options shown in searchbox or any dropdown menu. Material UI for React has this component available for us and it is very easy to integrate. We can create our own custom filter for options in ReactJS using the following approach. Cr
2 min read
How to add Slider in Next.js ?
Adding a slider in Next.js involves integrating a slider component, like react-range, managing its state using React hooks and applying styles for customization, enhancing user interaction and input precision in your application.ApproachTo add our Slider we are going to use the react-range package.
2 min read
How To Create A Custom MUI Search Bar Component In NextJS?
Creating a custom Material-UI (MUI) search bar in the NextJS application is a great way to enhance the user experience by providing seamless and stylish search functionality. In this article, we will guide you through the steps to create a custom MUI search bar component in a Next.js project.Prerequ
3 min read
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
3 min read
How to Add Simple DatePicker in Next.js ?
In this article, we are going to learn how we can add a Simple Datepicker in NextJs. 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
2 min read
How to Catch All Routes in Next.js ?
To catch all routes in Next.js, you create a dynamic route file using the catch-all segments syntax. This allows you to handle various routes dynamically, enhancing routing flexibility and application structure.Catch all routesTo catch all routes in next js, We willCreate a file named [...gfg].js in
2 min read
How to add CodeBlock in Next.js ?
In this article, we are going to learn how we can add CodeBlock in NextJS. 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 conditiona
2 min read