Create A Fully Functional Search Bar in Next.js 14 - Step by Step

hey what's up YouTube today we are going to learn how to create a search bar inside of next js14 and this is going to allow the end user to query through the database and then we're going to filter our database based on that query search term and then we're going to show it to the end user so this is like any website that you see on the web that has a search bar so the Technologies and Frameworks we're going to use for this specific video is going to be next js14 typescript mongodb for the database and prism orm to connect the database to our application so before continuing this video if you do not know or you're not comfortable with prism or mongodb or even typescript I recommend learning those before continuing with this video because in this video we're just going to go over how to create the search functionality inside of NEX js14 so now that we got that out of the way if you look at my screen I have a development server open on Local Host 3000 and this is what we're going to create so what we're going to do is is we have a search bar up the top and we're going to be able to search through these voices that I have down below and the voices have each an image a name some text and then audio for that text so say we want to search for Clyde we're going to type Clyde and Clyde will pop up another thing we're going to do is we're going to look for Joanne Joanne pops up and search part is working as it should one thing I want to show too is I want to pull up a diagram of explaining how it kind of works and how it renders so as you can see here we have a web page and this web page is the gray part and is representing our development server and at the top we have a search bar and the search bar is a client component so we have a client component inside of a server page and then right below it we have our pretty much database data Down Below in a listed way and that is also a serfing component so as you can see this just gives you a better visual of what is a server component and what is a client component that we're using so before we actually coding if you could hit that like button so other people just like you could see it and also subscribe for more content like this and hit the notification Bell so you get updated whenever I come out with new content because I will be going live and creating a SAS live pretty much every day on YouTube so make sure to hit that notification Bell so you're updated to date on that and let's get started with the code quickly we are going to go over the prism functions that allow us to query our database so what you see on the screen is if I zoom in a little bit more just one more time you're going to see a function called get audio files this function is using a prism method which is find Manny and it's going to find all of the audio files associated with a specific user so that is what this this function does and all it does is return the audio files and we are using that inside of our code and I'm not going to explain any more of this because we're just going to go over the search functionality so on our page localhost 300y your- voices as you see here we have a page. TSX file which allows this route to be publicly accessible to anybody on the web and this page by default is a server component because all pages in xjs our server components unless you mark the top as a used client directive which this page isn't so this is going to be our page that you saw in the introduction and what we have we imported two components one from search voices and the other from the voic list and as you can tell by the names the search voices is where all the pretty much functionality is of how the search bar bar works and the voice list is how we are displaying all of our voices and then allows us to also filter the voices based on the query which is why we're passing the query into the voice list so if we go inside of search voices you can see is a client component because it has to be we're using hooks from nextjs we're using the Ed search prams use path name use Rouser use router so the page has to be used client by default and there's no getting around this and it's kind of a stigma that client side pages are bad client side Pages aren't bad websites need interactivity they also need hooks obviously whenever you could do a surfing component you do it but if you need to use a client component go ahead and do it but use it in an optimized way when we're importing it into this server page and this page is technically still a server page just this component is the client component and in the voice list we actually are importing that get audios function get audio files function at the top here and then all we're doing is mapping through the audio files and displaying it on our page so this is the end code and when you see the next scene I'm actually we're just going to create this code from scratch I'll copy and paste a few things that I feel are not important but other than that let's get to actual coding now the first thing I want to do is I want to create a publicly accessible route so that we can actually display it to our user so to do that next js14 does a file folder convention and inside of the app uh folder the root layer is technically considered the homepage so there is a ph. TSX on the homepage and what we could do here is we could create a folder and whatever you name the folder that is going to be the URL path after your domain name so for us we could just do voices test and this is going to be the URL that people are saying so make sure you actually name it something you want for our video sake purposes we're just going to name it voices test and to make this publicly assess accessible we're going to have a file inside of it called page. TSX or if you're using JavaScript it's going to be jsx next we're going to use a snippet and this snippet is from es7 this is the snippet right here this allows us to quickly create functional components inside of react so what we're going to do to create it is we're going to type ra Ace this is a react Arrow function component and and we can name this page voices page you can name the page the function whatever you want all that matters is the name of the folder that is going to be the path name we could remove the import of react from react at the top and what we can do is we could have our parent div we will have H1 that says search voices here and then right below it if you remember in our example at the beginning which is what we're recreating we have two components one is called search voices which is where our search bar and all of our client functionality is and below that we're going to have a voice list which is where we're quering our database fetching all of the data and displaying it to the end user so we are pretty much good with this page for now and just to reiterate what's going on this is a server component because there's no use client directive at the top next let's actually create the search voices component right here you can either create it in a components folder like I have down here or for this video's purpose and sake to make it quick we are just going to create it right here so everybody can see it on the screen so we're going to create a new file we will call it um search voices. TSX what we can do here is we can run our afce again we could leave the function name called search voices what we can do now is we can actually import it at the top of our page because that where the component is going to be shown so import search voices and this is just coming from the same folder file and that's the path right there let's also make sure we are rendering the component on our screen by using it here inside of our TSX code so next let's actually work inside of the search voices component like I said this is going to be used client we are going to be using three hooks from nextjs and I'm just going to copy and paste them over real quick and explain what they are and our might well import this magnifying glass icon and that is from hero icons SL react sl24 for/ outline you could use any icon Library you want you can use react um icons whatever you want you can use I recommend using magnifying glass because that is globally known as the search bar so what we do here is we put our Imports here and the search prams all it does is it allows us to read the URL parameters inside of the URL so that is what the use search frames does and it does it on a client side page the used path name gives us the path that we're currently on based on whatever parameters you put in so since we're on the voices D test page it is going to give us that as the value so it's just giving us the path name of the current path and the used router allows us to navigate to Pages through client side components and one of the features to use router hook has is called refresh so instead of routing to a page it could just refresh the page without updating and rendering the page and this will allow was to update the parameters by using the refresh instead of routing the pages without pretty much rendering the page again like state would so if you use state which we can't use in this situation the page is always going to rerender on each key type so we don't want that to happen so we're not going to import the use State hook that is a reason why we're not doing it like I said we don't want the page to keep rendering on every key type so now for the search voices component let's pretty much initialize our three hooks let's go back and store them in variable so we're going to store the use search prams and the search prams the path name and the path name and we are using the um replace for the used router next thing I want to do is I am going to copy the UI of how the search bar looks so I'm going to copy everything here in the jsx I am also going to have a repo of this whole code inside of GitHub so all you got to do if you want to copy the search bar like I am just go click the link in the description go look at the search voices component and you should be able to copy this for btim like I am right here and where I got this from actually is I got this from next js1 14's actual website and on their website they actually have um a learn next js14 course and it's totally free I really highly recommend going through it it teaches you the basics is set up pretty good and like I said the best thing it's free and it teaches you a lot of things um what we have here is we have a squiggly is because we have an onchange on the input we have an input here we have the magnifying glass icon we have a label and then we just have a paren so inside of the input we have a handle search function that we don't have created so we could create that above the return and get help Cod pilot is trying to make me finish the code but I'm not going to do it yet and let me explain what this handle search function does so anytime somebody's typing in the input the handle search function is going to get called and we are passing in the e. target. value which is whatever the user is actually typing in inside of the input um bar and then we're accepting the parameters inside of the function and we're just naming it called search term you can name it whatever you want I'm going to be consistent and I'm going to name my search term like I did with the other one next we need to get the search term and we need to actually get this inside of the search parameters like I said we're not using State we're using State inside of the URL so we are going to say new URL search prams and then we're passing in the search PR prams and then what we're going to do here is we're going to do a check so we're going to say if there is a search term so that means if somebody actually typed in the input we're going to set the prams to the query the value is going to equal query but it's going to equal the search term I might have not said that the best way but when you see it actually on the page you'll understand I'm talking about so the query is going to equal the search term which is whatever the user typed in and then if there is no search term that means if nobody actually typed anything in the input we are just going to delete whatever the query is at the moment and then the last hook we haven't used with the last two hooks is the replace and path name so when this check runs the last thing this function is going to do it's going to replace the current URL without actually rendering the page which is how this is going to work so the path name is going to be whatever path we are currently on that is going to be voices D test and then we're going to pend it to the URL with a question mark and then we're going to change the prams to a string so the prams will be query equals and then whatever the search term is so that is how the functionality of the search bar Works inside NEX js14 make sure the page is use client you're going to use three these three hooks from next navig ation and then we could import the client component inside of this page which is a server page so now let's actually test this out so let's go to our page let's refresh our page make sure you're on the correct page I'm on voices test here's the search bar and obviously nothing's going to display on the UI down here but what's going to see is the actual URL search updating as we type so if that is working then that means we are done with that component and everything is good to go so let's type in like Clyde so as you can see as I'm typing the query is changing inside of the search pram allowing us to essentially Pass State through the URL without actually rendering the page so that is working if we remove it and we type in like Joanne everything is working perfect so our search component is working how it should the next thing we need to do is we need to actually accept the parameters from these uh URL search parameters inside of This Server page so to do that let's accept these search prams that is how we're going to do it inside a server component inside AA client component you can use the use search prams and it will actually read the parameters based on the parameters that the page is displaying but in a server component you have to use the search params like I am now so let's just give it the type that's supposed to get I know I have the type here let me just do that real quick so like I said we are just accepting the search prams and then we are since we're in typescript we are just defining the type as a query which is string and all all of the search prams can actually be optional that's why we have the question mark added at the end because it could be optional because somebody might not actually type inside of the input okay so next thing we want to do is we want to give the value to the actual search prams inside of a variable so what I did was I named a query so we're going to do the same thing so we're going to say cons query will equal the search prams do query and and if there is no search pam. query then it's just going to be an empty string perfect so now we are displaying the query based on the actual URL search PRS so to do that we can just actually console log the query and what I could do here is just to make sure we're receiving it query and since this is a search I mean uh server com uh page we have to open up this server down here and see the actual console log inside of the server console and not the client so I'm going to type in Clyde and see if we get CDE so we get CDE in the URL now let's go back to our code and as you can see here it is displaying query C query CL query CL pretty much query CDE so we are actually accepting the value inside of our server page so next thing we want to do is we can just get rid of this console log and we are going to create another component called the voic list. TSX we could do react functional component again we could leave the name as is for the function and inside of this page let's import at the top let's display it down here and then what we have to do is we have to actually pass the query this value which was logged in our server inside of the voice list and the reason why is because we want to make sure when we query our database we want to give the query of the user that's searching to the database so we could actually filter through the results and display the result that the user wants based on their search term and right now we are getting a where at squiggly is because we aren't accepting any props inside of the voic list component so as you can see in our voic less component we're accepting the query and the query is just a string so I'll do that real quick like that and another thing we need to do is we need to make this a synchronous function because we are going to be calling the database inside of this component so next thing we're going to do is we could go up here and we could take all these Imports and I'll explain them real quick and the first import is a separator and this is from shaten UI it's a great UI library that allows you to create UI components quickly and easily that already styled for you um you could also import an image from next SL image display the image we could remove the import from react and this import git audio files is the function that allows us to get all of the a audio files based on the user from our database of mongod and as you can see each audio file has parameters of an ID user ID file name count AI name URL text image created app and updated app and these are all defined inside of a schema. prism file so like I said if you don't know prism if you don't know mongodb some of this might be confusing to you and this part could be confusing um but since we have that audio files we are going to call it by putting in a variable called audio files and we're going to wait the get audio files function and what we can do down here is we console log make sure we are getting the audio files and what we can do is we can refresh this page we refresh the page and I have a bunch of console logs going on at one point but if you do console log it you're going to get a bunch of audio files based on the user logged in and here they are right here so you see all these audio files they have the ID user ID file name count AI name so all of that stuff here that was here you can see we're getting here and we have a account so we have a bunch of audio files inside of our console log so we are retrieving our audio file successfully so if you do want to check any of your code you could always console log a bunch of things a bunch of variables to make sure you're actually getting them inside of a certain component um next thing I want to do is I just want to copy and paste everything below the return for now and then explain what's going on no point in me typing this out manually because it doesn't serve you any purpose for this video so what we are doing here is if you're using typescript you have to sometimes do checks and I am just doing a check here making sure that the array is an array and we're passing in the audio files because it could be false or an array so that's why I'm doing array do isarray because if I don't do that it is going to say that this audio files might be false and then there's no way they display because it might be false and it could be type error so we're saying if the audio files array and the audio files if there's an audio files array and the audio files. length equals zero we are just going to display A P tag called no audio files found other than that let me just close this terminal real quick we are going to have a div and inside of this div we have we're checking to see if the audio files is an array and we are going to map through the filtered audio files so I made sure not to copy that over because this is very important and is a key part of the search functionality and this is basic JavaScript this is the filter method inside of JavaScript so if we go back to the voice list of our example I'm going to copy this over this function and we're just going to do right above the return so what I have here is we are obviously filtering the audio file and I named it inside a variable called filter filtered audio files and what we're doing is we're checking if the audio files is an array and if it's an array I want to use the filter method and I want to filter all of the audio and return based on the audio. a name and I want to make sure this is lowercase so nothing messes up when we actually search so that's always a good check always make sure it's too lowercase and it's going to include the query variable or value as well so the AI name has to include the query V variable so the query is going to be whatever the user searched right because we pass that from the client component to our page and now to our voice list server component because we're accepting it here as a pram and like I said if you want you can console log the query here make sure you're receiving it in the voice list component and if you are what we're doing here is we're getting the AI name so the AI name might be Joanne and we're going to lowercase it and then we're also going to make sure that any letters in Joanne are included inside of the query so if they type in a j Joanne has a j so Joan's going to be in the filtered audio files if it has a o Joan's still going to be there and so on and so forth so that's why we are mapping through the filtered audio files instead of just the audio files that we have here here in this variable so that is a very very key point when doing the filtered audio files and even though we are mapping through the filtered audio files at first if there is no query to lowercase here which that means if nobody's searching it's just going to display all of the voices on the page at first just like it should and what we're doing here is like I said mapping through all the audio we have a key as the audio. ID which is obvious obiously a unique ID for each audio file we are displaying the image in H2 which is the audio. a name the audio. text and we're displaying the actual audio and then what we have down here is a separator which just separates it's like a line that separates each audio file inside of the table so then after you have this voice list done this component make sure you go back to this page make sure the voice list components imported and rendering on the page and now we could test everything out to see if everything is working so let's refresh and as you can see here we have all of our audio files displaying and we can do a search so let's do a search for Clyde as you can see it's popping up and if I just put C anything with the c any AI name which is like Clyde Charlie or Rachel it'll pop up since C's here doesn't have to be at the beginning it's still popping up and then if you want to do h Charlie and Rachel pop up a now it's Charlie so perfect so everything is working how it should and the last thing I want to do to make this app more optimized is inside of the handle search we are going to actually add a react hook so it doesn't keep quering through your database after every keystroke the hook we are going to use is called use debounce and as you can see it has 1.1 million weekly downloads and what this does when it pretty much optimizes your app in a very efficient way so for example the handle search function every time you do a keystroke so if you type c l y d every time you type in a letter it actually runs the function no matter what so it'll run the function five times if you type in Clyde because that's five letters we don't want that happen because we don't want it to keep searching and running that search parameter and keep quering the database after every keystroke that is going to be very expensive if you have a lot of people using your database and doing searches on a daily basis and that would pretty much make you broke so one of the things you could do is you could use the used debounce hook and what this does is it allows a delay of when the function should be called so if the function doesn't get fired again for say 3 seconds then the function will actually call itself and run the function through so for a better example let's go back to our code and I add it inside the handle search function and we import it here at the top so you must install the package ed- debounce inside of your terminal and then import it here at the top like this used debounced callback and then what we're going to do is we're going to do handle search equals the used debounced callback and then we are just going to have the value of string and it's going to be an arrow function just like this and then it almost looks like the use effect syntax where we're going to have a comma at the end and then we are going to type in a value here which is going to be the delay we're going to have in milliseconds so we have 300 millisecond weight before this function actually fires to see if it is getting called again so when you type c the function fires it's going to wait a little bit and if nothing else Fires for the function it's just going to run the function but if you type in CL that means the function fire twice and it's going to wait and see if the user is pretty much done typing or not so that is why this is very useful because you don't want to keep cing your database when not necessary so the used balance callback is used for functions like a handle search function and like I said just install the package npm install use debound and you could read through the documentation like here and like it says it's a delay in milliseconds this one has a th000 which is 1 second you could do 3,000 which is 3 seconds um you don't want to do it too long because if you do it too long then you're pretty much when the user types the search results aren't going to display for say 3 seconds if you put 3,000 so you can do one second delay see what works best for you what works best for for your audience and implement it into your code and make your code more efficient and valuable other than that if you do have any questions about how to implement a search bar inside next js14 leave them down in the comments or actually join my Discord group where we have other developers who are like-minded like you who pretty much talk to each other could ask each other questions it's a community that you could join that I highly recommend joining and like I said I'm going to be going live if you're watching the video video when this came out I'm going to be going live creating a new SAS on YouTube live so you can follow my journey through there and we could get bounced ideas off each other or you can actually ask me questions while I'm live but other than that I hope this video has helped you a lot um like this video so others like you can see it and subscribe and hit that notification Bell for more content like this other than that peace

Channel: Brett Westwood - Software Engineer

Views: 2,036

Keywords: react, next.js tutorial, javascript, useSearchParams, Create a search bar in next.js, search bar in react js, usePathname, useRouter, Client components, server components, next js 14 tutorial, next js 14 search bar, next js 14 search bar params, next js 14 search, next js tutorial

Id: QoMHwks6hUA

Length: 30min 52sec (1852 seconds)

Published: Wed Feb 21 2024