#18: useSearchParams in Next.js 🔥Get URL Data in Client Component

Hello what's up guys, today in this video we will see you search params in our next application. Yes guys, today's video is very important because you can see what we did yesterday, yesterday I told you that if anyone is writing this type of URL, basically what do we call it? query string, where after the question mark, you can see here, whatever key value pair you are seeing, if you need its data on your application, which is used a lot in these e-commerce websites, whether you call it filtering, sorting, pagination, whatever it is, all this happens through this. So, this is a function use search param or empty search param which you get directly in props. If you master this , then guys you can easily create an e-commerce website. That's why it is very important. And if you see yesterday's video, it has only 494 views so far. Meaning, people still do n’t have any idea how powerful it is. Alright guys, so before we start the video I would like to give you a quick update. This evening I am going to upload a video on this road map of the server. And also we are going to start the classes very soon. And this codified thing that you see is my own IT company. So if you want to know regarding that or regarding the online classes, then do check out the evening video at exactly 4:00 pm. Do you understand ? So now if you are watching then it is a huge advantage for you because many people do not have any idea about this. And they will adopt many methods to do filtering, sorting and all those things in e-commerce. But if you know this, you can do it very easily in e-commerce. I will tell you further how we can do it in e-commerce. But guys whatever video I am uploading is very important. All of them are definitely going to be useful somewhere or the other in the future. Ok ? So you can see here use search form. Now a doubt may arise in your mind. And that is just yesterday when I read the search form. Right? When I read the search form yesterday, then what situation has arisen today that I have to read it on use search. There is the same difference between both. You can just see one thing. That is use this prefix which has been added ahead. So every time I tell you every video is important because I made a video here React Server Component vs Client Component. So both of them are different. One is dealing with the front end. The second one is dealing with the back-end and database. Right? So what we read yesterday that is a search P this comes in handy in your server component. Where does it come in handy? In server component, if you need this query string data then we use search method there. But if you need the query string data then its in your client component. Yes guys if you need data in client component then we can use this so that's why search param is important because it is made for server component. Similarly use search params is important because it is created for client component. So it is important to understand how you can get the query string data in both the pages because e-commerce data may be needed anywhere. Ok? So let me go straight to my BS code editor. You can see yesterday how we can get the data in a simple server component like this? Whose? URL data. If I call it more specific, it is called query string. Ok? Now this is your server component. I don't need to speak. By default all files inside the App Router are your server components. But what will I do? I will create another file inside this product of ours that you are seeing. Ok ? Inside this I will create another file. Sorry, I will say not file. A, this is a component. So I'll go with product list dot jsx. Ok? So I'm creating a component in this way. So fat arrow function this way. And here I take a second here I guess react arrow function component with export looks something like this. Yes. Well then. We can do this. What did I say? The next react is kind of the same. Whatever you do in react, you can do it here also. So this is how I made it. Ok? Allright. Ok? What should I do? You look carefully. So guise what do I do ? I'll go here. You can see our product list here, what have I done to it now? I added it. So now in our page this will also be called automatic component and we have also imported it from above. So I'm going back here. So guys, I'm going to go here. Amps on the same use search. Look, this is also very important. You have to keep in mind that this use search param, you can call it kind of a function or you can call it a hook, where do you get it from? Next Forward Slush Navigation. This is very important. Navigation is a package in your next application. Basically, inside Next JS, you are getting this particular function or method from there. Use search parameters. So whatever you get, you can store it in some variable. Let me write ah search params and I will keep it inside it. Ok? I put it inside it. Now guys one thing you can notice carefully here is that to use use search params I did not have to use any async await or anything. But if you look at the server component, then we have to use async await there. So this is also a major difference here. Because now you don't have to handle promises in the client component. Ok? Let's do one thing in this manner. I will just write console dot log and then search params in it. And let me do one thing. I will put it inside. I did inside inside so that you can know whether I am seeing the console of the product list component or the console of my main page. I also write it here, I give it a normal H1 in which I write A Client. Ok ? I am just writing client nothing else. Ok? This is also there and we have this one also. So if you look carefully here, then let me keep this as well for now. Ok? I kept it this way. I am doing a search here. Let me do one thing. I will put it this way, okay, it is already running. There is no tension. I'm here to work on my project. This is our project. And guys you can see a warning here. It is telling me that you are importing or using search params. But I am telling you that this react hook only works in a client component. Wow. So guys, now it feels good that things are getting clear, it is like clear here that by default all the pages are your sub-components. But if you want to use basically your search panes then you can use it only in the client component. So it means we need to convert this server component into a client component. Right? So what to do for that? We told you there is n't much difference. You just have to go to the top and write use client. This is it. I told you server component vs client component. Guys this is a very important video, believe me please, I request you. I fall at your feet. Watch this video and make notes. Make as many as you can and post them in the comment section below this video today. So that I can go and update it in the description of this video. This is very important. I want to see what new things you can find out. Differences between the two. Ok? So this is how my work is done. I go on inspection. I do one thing once in a while. I will refresh it. Ok? Now if you look carefully you can see it very clearly here. This is the outer one. Outer means server and by the way whatever console of the server is there, you never see it on the browser. But this is the beauty that like I guess after version 15 it is also showing it to you on the console so that I don't have to look at the terminal of the Baba BS code editor. And you can see very clearly that this is the server console here. So in this category, you are getting a laptop. Are there two pages, so you are getting two pages in this manner here if you look carefully, which is a very good thing. But if I look inside, there is not much you can know about inside here right now. And yes one more thing, if you did not see yesterday's video, then let me tell you what is the reason behind seeing the data that you are seeing here? So this is the URL and like after look, the products are our page but here you can see very clearly that we have this question mark, after this question mark, whatever it is, we call it query string. And we have a key and then value and how do I say the value of the key, you can call it the value of the variable because it is equal to here. So there is laptop in this category. The page value is two. And there is another page here whose value is three. So basically I kept two pages each. I wanted to show that if you write two same variables or keys then how do you get their values ​​in which format. I am finding something very awesome in the like server component. Like is a page, once you get the array, you can basically loop through it and do it later. But I want to see how we can get it done here. And guys I just realized that here this is basically your important function. Ok? So you have to add it like this at the end. Ok? And let's check it out what I am getting. Alright see now it's totally different. Okay, this was your out I mean outer first but what am I getting inside? You can see in Guys Inside it's a read only URL search bar. Showing size 3. Showing size three means its one becomes two. This one is basically the size you are getting. But what is that? I still can't figure out what the size of like is. Ok? So what do we do for that? Let me tell you. Look lets say I need pages. Ok? And make sure you have an idea in advance what params you're going to use above. Ok? What are the names of your variables in the query string. For example like we have a search ps dot. So you do The Moment. We have an entries there is a method in it. For each, get, get all, has , keys. But let's go with the gate. Now you have to write his name here. This is your parameter inside a string or variable you can say. Category from Let's. Ok? Will be equal to here we have a search params dot get. Okay, inside that we have a category. Okay, let's check it out. I will go here and do one thing, I will leave the client right here. What here, guys, if you want to show it, then you could have shown it by category like this, it's not a big deal, but I want to show an empty console, where I would like to show you the pages first and let's go with the category. Let's check it out. Can we show it like this? I would like to refresh it one more time. So alright. Ok? Look, you look carefully. So this is your server outer. We have nothing to do with it. But if we go to the inner side then you can see two laptops. You can see two laptops. Now do you understand what this means? This means this What do you mean by to? By two you mean page number two. By laptop you mean the category. So in this way you get the data in the client component. If I do this for you, I can go here and do it like this. Let's go category okay ? This is how I walk here. This is it. If I do this much then maybe now you will get a better inside idea about how it is working. Look, everything is set. The warning that was there has also been sent. Look at this, this is how page to category your laptop comes in outer. Pay you are getting the data in ah client component in this way. And if you want that friend, I have two pages. Like this he told me that look now it will be clear to you here also so I am getting its value. Look at this here, if you look here, there was basically value. Ok? And there were two here. I found the first one of the two empty. Ok? Let's now you need the data of both. So what do we have for that? By doing this we have to get all. Look, we also have a method by doing get all. Now if I do this and if I refresh once then you will see that in the pages now we are getting all those values ​​and then category was your laptop. So in this way here you are getting everything in one place on the spot. Basically I am talking outer come I mean outer, that too when you use search params in the server component but if you are using search params in your client component then the method of getting the data is a little bit different. And you can get the data individually in this way. We have one more option and that is to use the your guys by making entries but I don't find it that useful right now, right now, I still want to show you, let me show you the entries, the entries will be equal to see how to write them, obviously we have this search params, this is a variable, inside that we have these entries and ah let's do one by one work. If only I could do this much. What comes on Let's Check It Out? I refresh this once and want to show that okay so what we are getting entries in the URL search amps is showing something like this. Basically you got the iterator because here obviously we have this kind of object, so basically you should understand that it is not able to iterate the note list. So let us do one thing. If this has to be iterated then something happens by doing I guess we have object dot entries. You must get entry. So guys, you can see here one second is coming empty. Let's make entries from here. Ok? And guys if you are having a little doubt that brother what is happening here in this manner? One second from entries right. So if you are having some doubts about what is happening? So I would like to tell you that you do not have to take tension at all. Because I have already uploaded the world best HTML course. You will get everything here. Basically I have kept the object in advance. So if you watch this video, your work will be done. Ok? So I come here. And once I refresh, end or this is it. C now you are getting all the dates. Like we were getting into the server component. But still there is one problem and that problem is that the page is appearing as three to me. I mean my pages are two and three so I can see only one page and that too which was placed at the last. So I told you these are different methods but let me tell you one thing, you should leave it. You can do it very easily this way. Look, Annie, you already know what I'm going to get from my query string. So in this way you can easily get them one by one. Get it all. If you are thinking of multiples then the same variable can have multiple values. Else if you feel that there is going to be only one in this category. Either it will be a laptop or a computer or a mobile. If there is only one value in the category then you can use get in this way. And else go with get all. Ok? There were more of him. But I guess this is enough for you guys. Rest one more thing I would like to assign to you guys as a task today. And that is, I did this by using search params. And this is perfect. But if you remember when we were looking at params inside the dynamic route segment, props dot params, I said that we can use that also only in the server component. But what if I want to use it in the client component then how can we do it? So I told you like in client component we can use API which React provides us whose job is to read the values ​​of promises and then context. So here also these search parameters, I mean this also, this is also the same which I am getting from the prop. Same like your perms is optional. This also when both of the params are used I can pass the value of params to the client component with the help of use API. So basically I can use the value of search parameters also, I mean search parameters also here in my client component. So how can we do that? This is now up to you to figure out. What I mean to say is that now you can get whatever data of search params is there by using API here and tell me. Ok? This is your task for today. And I know guys again one more thing is left, the catch all route one. I will tell you that in tomorrow's video. But here it is. Or guys this is it. That's it for this video today. I hope you will like the video very much. If you like the video, please like and share it with your friends. And if you have any doubt then please comment. Because you know that this time, I tried my best to make this series of ours completely interactive. I am clearing your doubts wherever you have. I am replying to almost every comment. So please comment if you are having any doubt. Ok? And Guy's source code is also completely free. I am also sharing the notes with you for free. So if that's all I'm doing. I want you to please support me. You don't have to do anything. Just as I told you, please subscribe to the channel and share the video with your friends. I don't want anything else. Ok? So guys please subscribe. If you have n't done it yet, then I will meet you in tomorrow's video. Till then guys thank you so much. Take care. [music]