Build a Functional Search Bar in Next.js
Tags: webdev, nextjs, frontend, javascript
Published: 2023-12-03 19:27:45

The search bar is one of the most important components to integrate for mobile or web applications, especially the ones that deal with users consuming a lot of data from the website such as an e-commerce website, a blog, a job listing platform, etc.

If you're working on a flow that requires you to integrate a search feature in Nextjs, this blog post will help you out. You will not just build a functional search bar, in the consequent posts, you'll learn how to handle pagination and filter the search results based on the data structure.


To have a clear understanding of what we'll be building, we will use the Google search website as an example. And model it with Nextjs, Tailwind, and Typescript.


If you go to www.google.com, it will load up the homepage. From the homepage, you're presented with an input field where you can type in whatever you want to search, if you hit enter, you'll be shown the search result page for that keyword(s) you've searched.

When you search for keyword(s) on Google search, the keywords (what you want to enter in the search bar) are called "Search Parameters", these params are sent to the backend to get the result that fits the entered keywords from the database and it's finally shown to the user.


That's what we will do.


**In summary, we will:**


- Push the search query to the URL - using the `useRouter` hook

- Get the search query and use it to find related data  -using the `useSearchParams` hook


But in this article, we are not using any backend or database, instead, we will use raw data. Also, we will handle everything on a page. Don't worry, it's still the same experience.


## Table Of Contents

* [Step 1 - Create Next App](#step-1)

* [Step 2 — Set up the Starter files](#step-2)

* [Step 3 — Building the SearchInput UI](#step-3)

* [Step 4 — Build the ProfileCard UI](#step-4)

* [Step 5 — Updating the UI](#step-5)

* [Step 6 — Handling the logic](#step-6)


If you prefer to just look at the code, [here is the repository](https://github.com/stephengade/Technical-writing-codes/tree/searchbar/user-profile)


Now Let's start!



## <a name="step-1">Step 1 — Create Next App</a>


Run `npx create-next-app` in your terminal to bootstrap the Nextjs app. 


Follow the prompts as you always do. But note that I will use the new `App router`, Typescript, and Tailwindcss for styling.


`cd` into the project folder, and run `yarn` in your terminal to install all packages and dependencies.


After that, run `npm dev` to start the application and check `localhost:3000` in any of your browsers to see the website running.


If you've done that successfully, let's go to the next step.


## <a name="step-2">Step 2 — Set up the Starter files</a>


Create two folders in the `src` folder: `components` and `services`. We will put all our reusable UIs in the component folder and we'll put all our mockup data in the services folder.


Note: if you're not using the `src` folder structure, you can still create the component and services folder.


In the `services` folder:


Create a `data.ts` file to handle our mock API data. 


Put this code here

{% gist https://gist.github.com/stephengade/e1469881df7ba3fa61c2fe0c0633854b %}


Instead of duplicating random data, we use a `for loop` to generate 50 sample data.


Understand that we are just simulating how the data would come from an API response. And we defined a Typescript interface for it.


**Inside the `components` folder:**

- Create a `SearchInput.tsx` file to handle the search bar

- Create a `ProfileCard.tsx` file to handle our user profile card UI



## <a name="step-3">Step 3 — Build the SearchInput UI<a>


Starting with SearchInput, here is the code:

```tsx
import { useRouter } from "next/navigation";
import { useState, ChangeEvent } from "react";

interface iDefault {
    defaultValue: string | null
}


export const SearchInput = ({ defaultValue }: iDefault) => {
    // initiate the router from next/navigation

    const router = useRouter()

    // We need to grab the current search parameters and use it as default value for the search input

    const [inputValue, setValue] = useState(defaultValue)

    const handleChange = (event: ChangeEvent<HTMLInputElement>) =>{

        const inputValue = event.target.value;

        setValue(inputValue);

    }



    // If the user clicks enter on the keyboard, the input value should be submitted for search 

    // We are now routing the search results to another page but still on the same page


    const handleSearch = () => {

        if (inputValue) return router.push(`/?q=${inputValue}`);

        if (!inputValue) return router.push("/")

    }


    const handleKeyPress = (event: { key: any; }) => {

        if (event.key === "Enter") return handleSearch()

    }



    return (

        <div className="search__input border-[2px] border-solid border-slate-500 flex flex-row items-center gap-5 p-1 rounded-[15px]">

            <label htmlFor="inputId">searchIcon</label>


            <input type="text"

                id="inputId"

                placeholder="Enter your keywords"

                value={inputValue ?? ""} onChange={handleChange}

                onKeyDown={handleKeyPress}

                className="bg-[transparent] outline-none border-none w-full py-3 pl-2 pr-3" />


        </div>

    )

}

```


Whenever we type something in the input field and hit Enter, the URL has the search query. 


For instance: `localhost:3000` becomes `localhost:3000?q={query}`


When we are handling the search logic, we will grab this query and use it to filter our data.


This is basically what we need for the input component but you can further customize it to your taste to handle the error state and validation.



## <a name="step-4">Step 4 — Build the ProfileCard UI</a>


The profile card also passes some props and we pass values to it when handling the logic.


Here is the code:


```jsx

import Image from 'next/image'


//Import the profile interface from data.js


import { iProfile } from "../services/data";



export const ProfileCard = (props: iProfile) => {


    const { name, email, username, role, photo } = props;


    return (

        <div className="profile__card rounded-[15px] border border-solid">

            <Image src={photo} alt={username} className="h-[200px]" height={1000} width={400} />


            <div className=" bg-slate-300 p-3">

                <h2 className="">Name: {name}</h2>

                <p>Role: {role}</p>

                <p>Email: {email}</p>

                <p>follow @{username}</p>


            </div>

        </div>

    )

}
```


The profile UI is ready, now let’s go to the next step.


## <a name="step-5">Step 5: Updating the UI</a>


Create a new folder in `src` called ‘pages’’


In the pages’ folder, create a new file called `Homepage.tsx`. This is where we are going to join all our components together. For now, simply return this:


```jsx

const Home = () => {
   return (<>this is Homepage Component</> )
}

export default Home

```


If you are using the Nextjs app router, open the `app` folder, locate the `page.tsx` file, open it, and clear everything there. Then simply put this code there:


```jsx


// import the Homepage component


 const App = () => {

  return <Homepage />

 }


export default App

```


Check your browser now, you should see something like this:


![First demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0812knbj2t42x5ho92w9.png)



## <a name="step-6">Step 6: Handling the logic</a>


Let’s update and handle the logic in the `Homepage` file. Follow along:


```jsx


// change this component to client component


'use client'


// import the data

// import the searchBar

// import the profile UI

import { useState, useEffect } from "react"

import { ProfileCard } from "@/components/ProfileCard"

import { SearchInput } from "@/components/SearchInput"

import { data, iProfile } from "@/services/data"


const Home = () => {


  // initialize useState for the data

  const [profileData, setProfileData] = useState<iProfile[]>([])



  useEffect(() => {

    // will be updated soon

     setProfileData(data)

    },[])


  // get total users

  const totalUser = profileData.length;

  return (

    <section className="h-[100vh] w-screen px-[2rem] md:px-[6rem] mt-[100px]">

      <p className="mb-10 ">Showing {totalUser} {totalUser > 1 ? "Users" : "User"}</p>

      <SearchInput defaultValue={searchQuery} />

      {/* // Conditionally render the profile cards */}

      <div className="mt-8">

        {totalUser === 0 ? <p>No result returned</p> : (

          // return the profile cards here

          <div className="grid grid-cols-1 md:grid-cols-3 items-center gap-5">

            {profileData.map(({ username, role, name, photo, email }: iProfile) => {

              return (

                <div key={username}>

                  <ProfileCard name={name} role={role} photo={photo} email={email} username={username} />

                </div>

              )

            })}


          </div>


          // End of profile data UI

        )}


      </div>

    </section>

  )


}

export default Home

```


If you check your browser again, you can see our search input component and all the 50 users displayed on the page. 


![Demo 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n05aruxmngvmig5bkoav.png)


And if you perform a search, nothing is happening. Let's handle that.


Now that the search query is set to URL, what we need to do now is to grab the query and use it to fetch the data from the backend. In our case, we will just use it to filter our mockup data.


To grab the search query, we will use the `useSearchParams` from next/navigation. 


```tsx

// import the useSearchParams hook

import {useSearchParams} from 'next/navigation'

// And replace your useEffect code with this:

 const searchParams = useSearchParams()

  // Now get the query 

  const searchQuery = searchParams && searchParams.get("q"); // we use `q` to set the query to the browser, it could be anything

  useEffect(() => {

    const handleSearch = () => {

      // Filter the data based on search query

      const findUser = data.filter((user) => {

        if (searchQuery) {

          return (

         
 user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||

            user.role.toLowerCase().includes(searchQuery.toLowerCase()) ||

            user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||

            user.email.toLowerCase().includes(searchQuery.toLowerCase())

          );

        } else {

          // If no search query, return the original data

          return true;

        }

      });


      // Update profileData based on search results

      setProfileData(findUser);

    };


    // Call handleSearch when searchQuery changes

    handleSearch();

  }, [searchQuery]); // Only rerun the effect if searchQuery changes

```


If you join this code with the `Homepage.tsx` and test your app, it should be working fine 🙂


You can search by username,  email address, name, and role. 


![full Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpl2fhh3v0j90n5bdwga.gif)


Depending on the structure of your data and UI flow, you may need to paginate and filter the data.


I will handle that in the next post, so stay tuned.