Learn Search Params in Next.js 14 by building a project! React | Tailwind | shadcn/ui

hello there everybody welcome back to another video and today we are going to talk about search prams in next gs14 and how you can use them effectively so without wasting any time I'm going to show you what we are going to build today if we look at the screen so this is the basic app that we are going to build and all I want to show is the demo of how you can use search params in here so for example we have these tabs so we have Gallery we go to members we go to settings and you see at the top in the URL we see the search params changing so we are on the tab settings and if we refresh we are still on settings unlike normally we are on gallery which is the default tab now if I were to go ahead and search something here for example let's just say Max programming and that's going to update the search params with whatever we are searching and it's we can also show it right over here so if you have something like to filter out stuff we can use this search prams as well so if I want to let's say share this to someone and someone goes ahead and visits this page and Let me refresh a couple of times you still see we have this value pre-filled over here that's because of this and we're going to see how to do all of this inside of shat CN UI so it's going to be a lot more fun to see so to begin with we have a simple nextjs app over here with shat CN UI set up now if you don't know what Shad CN UI is it's basically sort of a component library that you can basically go ahead and install so what you have to do is if you set it up you can just go ahead and let's say you want to add this button so you just run this command npx sh CN UI add button and all that's going to do is it's going to just add a button component inside of your file system not in your node module so it's not going to install a package but it will add a button inside of your file system so we added two components we added tabs so these this is how the tabs look like and we added the input component so this is how the input looks like so going back we have this tabs component and we have this inputs compon input component which is what we don't want to touch now so the homepage is empty the first change that I would like to make is go to layout. TSX and inside of here in the HTML I'm just going to add a class name of dark so what this will essentially do is it will tell Tailwind to set a dark mode and that way shat CN UI is also going to be dark mode by default so if you go to the homepage it's completely empty but it's dark mode so that's our first progress now let's go right over here and we are going to add the tabs so in this div I'm going to add the class of container and then I'll say Max width is going to be screen LG so that will just reduce the width a little bit and then I'll just say margin top five so that's our div now I will have just this H1 that just says search bams with some Styles so this is how the page looks like now let's add the tabs so right over here we could just go ahead and say tabs right so that will import the tabs from components UI tabs let's just do that and we can set the default value so let's just set the default value to gallery for now because this is going to be one of our tabs then we have the tabs list component and let's add the tab uh tab trigger component tabs trigger and the first one is going to be gallery and we have to set the value so the value here is going to be Gallery so this is our first tab now let's just copy and paste this same tab two more times this one is going to be messages let's add messages over here and this one is going to be settings so let's add settings over here let's hit save going back to the app we get these three tabs perfect now to add some styling we could just go ahead and say class name width full to the tabs list and then also for each one of these we could just go ahead and do the same thing so let me just copy this and width full width full width full perfect so this is how the tabs look like as expected so now below the tabs list we can have the tabs content which will essentially just hold the tab content for the gallery I'm just going to call it Gallery just this and we need the value to be Gallery so this this will basically show in the first tab so if the first tab is focused this it will show this value and let's actually go ahead and wrap this inside of an H2 tag with all the stylings so I'll just go ahead and say Gallery like this so that it looks a little bit better all we have is text Center to Exel font semibold going back we have Gallery here and in messages settings we have nothing so let's add those and to add those we could just again copy and paste the same thing so for this one we have messages and we are just going to show the text of messages and for this one we have have settings and we're going to just show the text of settings nothing else going back we have messages settings and uh Gallery perfect now if I were to go ahead and click on messages and if I refresh I go back to Gallery that's because this is the default value if we go back over here we have the default value set to Gallery so how do we make it that if I want to be focused on another TBL let say settings by default how do we do that we can actually do that using query param so if I were to just say question mark tab equals to settings so we want to catch this query parameter and whenever this is the case we want to set this as the default one so let's go ahead and create an interface so I'll just say interface I'm going to call this home props now if you are not using typescript if this is jsx for you not TSX then you can just skip this part right over here interface home props we can just add search params now this is what nexts gives us this is going to be the object which will contain all the search params so let's go ahead and type this out as the tab so the tab is going to be of type string now this again this can be optional as well what I mean is if for example there is nothing in the URL like this so this tab is actually going to be nothing it's it's not going to exist so this search perams will be an empty object so we can make this optional using just a question mark here so we have added this tab now let's go ahead and destructure the props we could just say home props and we get back the search params all right so if I were to go go ahead and console.log search param right over here what you'll notice is I'll just open up I'll open this console up and we get an empty object and we also get the preview right over here using the console Ninja vs code extension but I'm still going to show it right over here so we get this empty object because we don't have anything inside of our search perams so if I were to go ahead and say let's say tab equals settings going back to the editor we get tab settings if I were to make this like let's say A B C D whatever is going to be the same thing A B C D now we want to get the current tab so let's just remove this and let's say let current tab is going to be search params do tab all right so this will be either string or undefined but what if it is undefined what if there is nothing in here well in that case we could just go ahead and say we can use the nullish coaling operator and we can set it to Gallery so what we are not changing this part over here remember we are only changing the value of this variable so if this by any chance is undefined we set this to Gallery so now let me just console.log current tab let's hit save so we get ABCD here that's because we have tab equals ABCD if I make this let's say settings we go back this is settings if I remove this now we should have gallery and here we go we have Gallery because we set this as the default value if uh this is undefined now what we can do is we could just use this current tab so I'm just going to use a dynamic value in the default value right over here tabs default value is going to be current tab hit save and let's see so right now we have nothing so the default tab is this one if I were to change this to let's say tab equals settings you see settings is focused if I change this to messages now messages is focused but what if I change this to something weird all right you see no tab is focused but by default we want gallery to be focused in that case what we can do is we can use ails so let me just change this out so if let's just add a condition if current tab is not equal to messages meaning if it is not messages and it's if current tab is not equal to settings right so if it is neither messages nor settings if it is some other gibberish or something else all we need to do is just set the current tab to Gallery so if it is anything else anything other than messages or settings we just set it to G G and that way the default value becomes Gallery let me show you a demo so right now we have this weird spelling of messages over here if I refresh you see Gallery is focused by default because whatever you put here doesn't matter except if it's settings we get settings now if I were to remove this s from here we get Gallery back again perfect so that's how you have the basic usage of search pams but hey what if I want to change this search Pam whenever I click on any of these so if I want to let's say go to messages but this does not change we can easily do that by just making this a link component by xjs so what we can do is let's just go ahead and let's do the messages first so inside of tab trigger tabs trigger let's just go ahead and add a link component by nexts so this is imported from next /link and let's just set the HF to I'm just going to set the HF to an object I'll explain why and inside of this let's create an object actually this is not an object this is the dynamic JavaScript part this is the object and in this object I'm just going to set the query property and inside of the query object uh query property this is also going to be an object so let me expand this to make it a little bit more clear so we are passing in an object in this object we have query which is another object and we can just set the tab right over here to messages normally we can pass in HF equals to let's say slash something or slash uh we can can do something like this tab equals messages but this is not the right way I think this works but I don't think this is the right way if you want to handle something like search perams so we can just pass in an object like this and we just set the query tab to messages let's try it out so if I were to go ahead and click on this see we get messages here but there's one problem what if I click on here well nothing changes right on except the text right so the text works so in this case we are using Shar CN tabs trigger so what we can do is we could just make this as child what it will do is it will swap the tab trigger which is the default component with the link now this whole thing becomes a link so if I click anywhere right over here so if I'm let's just remove this if I click on here you see this becomes messages all right so let's do the same thing with settings right over here we could just copy this whole link let's paste this let's close this out but this time this query tab is going to be settings so let's do that settings and let's make this as child again so now if I go to if I let's click here you see it changes to settings if I click here changes to messages if I click here nothing changes but we also want that to change so let's copy this go right over here to gallery and I'm just going to go to Gallery but this time we don't want anything in the tab right but we cannot outright remove this tab query Pam so what we are going to do is just set this to Gallery it does not matter what we set we can even set this to XY Z nothing really matters over here but we using gallery for readability purposes so now if I click on gallery I forgot to add the as child prop so let's add as child over here go back if I click on gallery this changes back to Gallery messages settings Works smoothly if I refresh now we are on messages if I go to settings and refresh now we are on settings perfect now that's it with the tabs thingy but what about the search bar that I showed you for the search bar we need to create a separate client component that will hold the input so let's go right over here inside the components folder that we already have and I'm going to create a new file I'm going to call it search bar. TSX right the first step I'm going to do is set this to use client because we are going to use some hooks inside of this one now I'm just going to say export function search bar let's just say search bar and let's just return uh nothing but just an input from here and I'm just going to have a placeholder search title here now let's go to page. TSX and just after this H1 I'm just going to use this one so search bar this will automatically import it from components search bar so let's hit save let's go back we have this right over here let's add some styling let's go over here in the input and I'm just going to add a class name of margin y5 so that adds some spacing in between perfect now let me show you what hooks we are going to use first right off the bat we are going to use the hooks provided by next years which is use router use path name and use search Brams so we can just go right over here and let's say const router equals to use router which comes from next navigation not next router so let's invoke this hook then we got const path name equals to use path name this way we get the path name which is basically the current path whatever comes after or whatever comes after slash right so if it's slash not the query params but slash if you have let's say a big path SL blog SL poost whatever this is called the path name so we get the path name and let's just say con search params is going to be equal to use search pams so we need these three hooks as the base now what I want is that whenever I I type something right over here this should update the search params right over here here and should add another query parameter which is title equals to whatever right whatever I type in the input so this should be the search params after I type anything in this input we can easily do that using the on change event listener so let's just say on change is equal to I'm just going to call this handle search title okay now this is this function is not made yet but I'm just going to add the event right over here so we get the event if you know react you know what I mean we get the event here and inside of this function I'm just going to pass in e. Target do value all right so in this function we're going to take in the value of the input so let's just go ahead and create this function function handle search title it's going to take in the value which should be of type string if you're not using typescript just you can just omit this part type string whatever that is all right so we get the value which should be of type string everything is perfect let's just console.log to confirm so we're going to console log the value let's go ahead and inspect go to the console and I'm just going to type in anything like let's say Max you see we get M Ma and Max perfect so it works now what we want is this search pams to change right this search params that comes from use search params is read only if you were to hover over this you get readon URL search params so we cannot exactly modify this we have to change the route just like when we click on something right we have the link component that changes the route similarly we have to change the route for that we use the router so we get the search params now these are read only so how do we change them right what we can do is we can make another search params so let's just name this const SP you can name it anything you want SP is sort of a convention SP is equal to new URL search params which is a default Constructor you don't need to import it or anything and we can pass in these default search pams in here so all this will do is it will copy all these search pams and now you can write them inside of here what we can do is we could just say sp. set and we can set a search param we can set the title search Pam so we want right over here we want it to be title equals to something so we can just say set the title we want to set the title search pram which basically means after the URL I want to have title is equal to whatever the input is so the value we get the value from here on change e e. target. value we get the value we can set the title to the value that we get from this function so we set this but we are still not using this search param anywhere else we are changing this but we are not using it so what we can do is we can just say router. push so so we can use the router. push in the href we can pass in string template like this we have back tick and what we do is we put path name over here which is as I said it's going to be slash or/ blog or whatever you have it's going to be the path name and let's add a question mark and then let's add SP which is the modified search params now this is not a string this is a URL search param so we have to convert it to string with DOT to string so what this will do is it will set the title to the value and it will say well hey what's the path name in our case it's slash so it's going to say slash and then it's going to add a question mark then it's going to say SP do2 string which will make it title equals to anything for example value whatever I type in there this is what it will become and if we already have some search params which in this case we have tab equals Gallery so what what it will do is it will take the already tab equals Gallery it will add the end percent and title equals value essentially what it does is it just adds another search param which is title and if title already exists it's going to just change it let's see it in action so we go right over here I'm just going to clear out all search prams for you and let's just go ahead and type in let's say hello world you see instantly we update the search pams Hello Plus World perfect exactly what we want but what if I click on the messages you see that search pram goes away how do we prevent that from happening well if you remember inside of the page. TSX we get all the search pams so even though we are just typing out one we still get all of them let me just uh console.log search pams right over here hit save you see we got tab messages if I were to let's say let me just remove this we get nothing as an empty object right now but if I say hello we get title hello and and like whatever the title was what we can do is we can add a title which will can be optional of type string all right let's get rid of this now what we can do is when we are changing this when we click on a link all we do is we modify the query with whatever the tab is but what we actually need to do is we have to we also need to get the previous title so if there is already some search params we just want to place it right over here what we can do is we could just go inside of the query object and we can use the spread operator all right and we can just say search params let's add a comma what this will do is it will spread the existing search params which is in our case a title right it we're going to set that to whatever the title was so it's going to just spread out the whole object and then add the tab gallery or modify the tab Gallery let me show you an example so right over here we have title hello and now if I were to click on this you see this title hello stays and then we get tab Gallery but this is not the same case with messages and settings right we can just copy over this same logic in here and in here as simple as that now let's get rid of all of this let's say it's going to be Max programming right so we get the title if I go to the messages tab it Still Remains now whatever we type in here I want to show in any of these tabs and remember we get the search params and these are all the search params so what I can do is I let's just go ahead and create a variable I'll just say const title is going to be search params do title let's go down and inside of the content I'm just going to say Gallery title messages title and settings title this is just a demonstration to show you that we can access these search params wherever we want so it's like a global state that we can use all right so you see we get Max programming if I were to just remove programming we get only Max perfect if I were to go to messages settings it still works as it is but what if I remove this well you see we still get title equals to but it's equal to nothing what we can essentially do is go back to search bar and we can check well hey if but somehow this is empty we just want to delete this title search Pam let's just say if if value is equal to an empty string we can just do sp. delete again a helper method that we can use sp. delete title as simple as that and let's say else we want this to happen else we want to set it so if value is empty string so if the user has nothing in here then we just remove this this will be removed and let's also add do trim so what this will do is it will also handle spaces so so let's say the user types in a couple of spaces we also want to count that as an empty string so we can just trim the spaces out and that's going to work as it is hit save let's go back and I'm just going to type in something let's say hello and then I'm going to clear it out you see the title is gone all right so finally I'm just going to say hello let's hit refresh you see we don't get title uh whatever the title is in here it's actually quite simple to do what I can do is I can just go ahead and say default value is going to be title now what is this title well it's actually nowhere to be found so we can just get it from search PS remember this is read only we can read from this we cannot write to this so I could just go ahead and say const title is going to be search params doget title now typescript over here throws us an error that string or null cannot be used right over here because this also can be null so let's just go ahead and add the n Lish operator and just set it to an empty string so if there is no title in the search params we set it to an empty string hit save go back and it's hello if I refresh you see it's hello if I were to change this so let's say Max you see this is set to Max that's basically it that's about it with the search params but there is one little bonus that I want to teach you which is handling debouncing so if you are let's say searching through your database right whenever the user types in something let's say you want to uh find John in the users list if you are using a database and you are querying that database whenever the user types in anything this realtime thing can become very expensive to you so what we can do is we can use debouncing over here so that whenever the user types in let's say John and then wait submit now this gets set to the query Pam and then this can proceed with everything else so for debouncing we can actually go ahead and use a library so I'm just going going to Quick open my terminal let's go right over here and I'm just going to say pnpm install use hooks DDS now if you're using npm just use npm install yarn then yarn add yarn install I use pnpm so we got use hooks TS now use hooks TS is nothing but a huge library of hooks huge huge collection of hooks there are so many useful hooks that you can use we are going to use the use debounce call back hook so how do we actually use it what we can do is let's go right over here where we have all these Hooks and I'm going to add another hook I'm just going to say const debounced title is going to be use debounce and we don't get any intelligence but we are still going to import it this way so let's import something from use hooks TS so we are going to import the use debounce callback we also have used debounce which is going to be dicated soon enough so we are going to use the latest one which is USD bounce call back don't worry I'll explain you what it means so we got use debound call back and right over here we have to pass in the function that Updates this title in our case what we do is we update the search params right we do not have set State we do not have used State anywhere all we are doing is we are modifying the search params so what we can do is we can just pass in this function so right over here we call this function right over here inside of on change instead of on change we're going to give use debounce call back this function so this by itself is going to call handle search title and we can set the delay which is 500 by default 500 millisecond which is half a second so if I use a types and then stops for 500 milliseconds we then run this function so basically it will wait for the user to stop and when the user stops it will wait for 500 milliseconds and then it will run this function so let's just set it to five 500 and we're going to change it later so we got the debounced title actually I'm sorry we don't get the debounce title here we get the function called debounce let's just call this debounce so this is basically a function that we can call instead of this handle search title so let's just go ahead and change this with debounce and there we go so what this will essentially do is it will take the value which we take right over here if I were to remove this for example this is going to throw an error right over here because we don't need value but we still need it if I let's say change it to of type number this again throws an error so it's completely type safe as well now if it seems confusing don't worry just look at the code what we did is essentially just we replaced the position of handle search title instead of calling it directly when the user types we call it after sometime we call it after 500 milliseconds so how do we do that we give this function to this hook this hook returns to us a debounced function a function that basically waits for some time and we call the debounced function fun over here hit save and let's go back so I'm just going to clear out all these search params now I'm going to say John you see it took some time right there was a wait and then it put all the John so it's not like j o h n it waits for the whole thing to finish if I say do it waits for that if I clear it out again it waits if I were to crank this up to let's say 5,000 milliseconds it's going to wait for 5 seconds but we don't want that so let's just make it 2 seconds for now so I'll just say let's say John uh John it'll wait 2 seconds and then will do its job normally 500 is the good way to put it but if you have some requirements you can always change it to 2 seconds or 5 seconds or whatever I hope this video helped you out if you want all of this code it will be on a GitHub repository I'll leave the link in the description below if you have any suggestions for me let me know in the comments below if you have any questions about this if you don't understand anything ask it in the comments I will help or somebody else will help like it sh sh it with others let me know what other content you want finally thanks for [Music] watching

Channel: Max Programming

Views: 3,485

Keywords: javascript, typescript, react, js, web development, node js, nodejs, javascript tutorial, javascript course, learn javascript, javascript mastery, next.js tutorial, nextjs 13, next 13 tutorial, next 13 project, next 13 crash course, next 13 app dir, next js 14, next js project, next js tutorial, app router react, app router theo, nextjs app dir, next js app, searchparams react, search params nextjs

Id: 2B9l-IMk0KQ

Length: 28min 12sec (1692 seconds)

Published: Thu Feb 15 2024