#17: Next.js SearchParams Tutorial – How to Use URL Query Strings in Next.js

Hello, what's up guys? Today in this video we will see search param in our next application. Believe me, this is a functionality which if you understand well, then you can easily make an e-commerce website. Because you can see here, in all e-commerce, there is filtering, sorting, pagination, search, dynamic deals, etc. You can do all this with a search param. Yes guys, only with a search param, you can do all the filtering, sorting, pagination in e-commerce. You can establish everything. This is so awesome. You can see clearly here. First, let's read the definition. Next.js, especially in app router. Right now, we are working on app router. After Next.js version 13, we will work on app router. Search param has an optional prop. If you create any file, you will get the page. You can access in a server component. Or by a loader function. To read query parameters directly from the URL. This is very important. What does it do? To read the query parameters. We can easily read all the query parameters in the URL with the help of search param. It is extremely useful for building features like filtering, sorting, pagination, etc. All of which are essential in e-commerce website. We all know this. You can see here. Read it again carefully. It refers to the query string parameters in the URL. I hope whenever you have read JavaScript, you must have read the query string. Parameters must have been read. Query string means any data after the question mark in your URL is called a query string. And you can see very clearly here. See this. This is your query string. After this question mark. You can see here. You can find out the data of the category. You can see this sort here. You can easily get the data of the category. You can see the page. It is useful for pagination. You can easily get the data of all the fields after the question mark. This is very important. You can see the image here. I will zoom in a little. Yeah. Over here. See this. If you want to filter, the category will be useful. See this. Products, category, shoes, brand, Nike. In this way, we can filter the product on the basis of category and brand name. And how will you know what the user has selected? See this. In this way, you will know. Done. If you want to do sorting. Products sort equal to price ascending in this way. So results sorted by price, popularity, rating. Do you remember? Any e-commerce website. So guys, you can see sorting here. Can you see? See this. How to sort? Like low to high, high to low, customer's review, newest arrival, best sell. This is sorting here. Right. So you are getting that here. Then we have a pagination, which is at the bottom. See which is the page number. How many products do you want to show on it? See that. See how we can use it for search. If there is any dynamic deal, then the deal that I know, you can't see it here. But it was something like that. Don't worry. I am sharing this PPT and notes with you for free. So guys, if you have not subscribed to my channel, Thapa Technical yet, please do it. Like this video with your friends. And if you have any doubt, do tell by commenting. You know, this time I have made a full interactive course. I am replying to all your doubts in the comment section. I hope you have got an idea that what is this and why it is so useful. Once you know this, you will make a full e-commerce website. So let's try. This is our users. Here I do one thing. I create a folder. I create a file in it. And I name it products. So what am I doing? What will happen if I do this? First, my folder will be created automatically. A file will be created in it. So I go inside it. So I zoom a little for you guys. And here I name it products. Or product. Products will work. And alright. Now here, params are not right in their place. Here I have to write props. Now I go here. And by the way, by default we have read that this is a server component. So that's why we have this async over here. And how do we use search params? Let me tell you. First, I create a return h1. I do search params here. Alright. And I go here. Let's go with console.log. And props.search. See, by default we get that as an optional in props. So it's a search params. Alright. So here you can see how you get search params as an optional. So basically all these work inside props. By the way, if you want you can directly destructure it. Here you can see. They have directly destructured it. I will show you that too. So you can see guys. I will run the project and show you. I want to go to the playlist page. Alright. Products. So it's a localhost. 3000. Perfect. I will also do console. However, whatever console you are doing in the server, you never see it in the browser. But guys, they have done it so awesomely that it shows that whatever console you are seeing is of the server. Alright. Let me tell you what I want to say. For now, if I run products. Alright. So you guys see what happens here. I am running products. And the default. Oh, I am really sorry. Actually, what happens is that when you are doing server component, you have to export the default. So export default. Then they will know which page is being talked about. Okay. I did this. I remove it. I refresh it. See. Yeah. This is it. So now you can see very clearly that you are getting a promise. Like I want to console the search params, but it is telling me that you handle the promise first. It's in a pending state. So what will we do? Look, this is async. Let's do one thing. Now, when we have worked so hard, whatever the output will be. Search params. Let's put params like this. And this console.log, this search params. I want to put it on this. Okay. Let's check it out. Let me refresh it once. So now you can see very clearly that the output I am getting is an empty object. It's an empty object. Right. So why is it an empty object? Why is it an empty object? Because if you look at your URL right now, you can't see the query string anywhere in this URL. If you can't see the query string, then it will remain empty. So how do you make a query string? You have to give a question mark. And then your key value. And then separate key value from n% and then separate from m%. Okay. I'll do that. For example, there is a category. Categories. Category. Oh, my God. But it's a search params. And boom, guys. See. Okay. So showing laptop products sorted by price ascending and page is 2 so guys this is so awesome now here they are saying route product use search params.page this search params should be awaited before using its properties now see here you can see clearly guys here you can see clearly since this search params props is a promise you must use async await and react use in version 14 and earlier was a synchronous prop before version 14 it was a synchronous prop right so whatever I have written earlier was working but now after version 15 it is not working to help with backward compatibility you still use it asynchronously in next version 15 but they are saying this behavior will deprecate in future so there is nothing to do guys here basically you wait and put it in one place do one thing do this now you got search params so this part remove it and do this so the thing is I have already awaited it now I am accessing their properties now if I inspect refresh on console once again in front of you and boom guys see this is it so it is important to understand things means still many people are using 13 point something version but you can see in 13 and 14 even in 14 and 15 we got to know a difference that search params can't be written like that like you have to return your promise and you have to await and deprecate in future if you do what we did earlier I don't know maybe you didn't get that idea but the idea was that first you have to await search params after that you can access their properties so I did this and this is how you can deal with ecommerce website because you got all the data now you just have to use filter whatever your epi is yeah guys this is it for today's video believe me guys this search params is very important and in tomorrow's video I will tell you what is use search params and yeah I just remembered I forgot the catch all but I will tell you in tomorrow's video don't worry but today's video was very important so guys comment below if you have any doubt please comment I will help you and please like the video share it with your friends our next target is 8 lakh subscribers if you haven't subscribed yet please do it till then guys thank you so much take care