Build A Functional Search Bar with Next.js (SearchParams)

[@amberm-31]

I wasted a few hours trying to figure some of this out and then skipped to the middle of your video and got my errors fixed in 5 minutes. Life saver. Thank you.

[@brettwestwooddeveloper]

Awesome Amber! Glad I could help you out there

[@dotaimbalegends7]

You provided amazing tutorials on the new version of Next.js. I was thrilled to find your tutorials so quickly after the release of the update!

[@brettwestwooddeveloper]

Thank you!

[@0the0ambient0]

Nice video. Thank you. It answers some things more clearly than other resources (including the Next.js docs)

[@chriseski]

The content you are working on in each of your videos are really to the point and very usefull. Simple and nice explanation as well! But Brett, when I see your desktop, I get instant anxiety disorder 😅. I am one of those order freaks, I admit it... Thank you for your helpfull videos, keep up! 💪

[@brettwestwooddeveloper]

Thanks for the kind words and yea my desktop is messy for sure

[@oOserkanCakmakOo]

Thank you for sharing useful informations Brett

[@brettwestwooddeveloper]

You are welcome!

[@maskman4821]

This is very useful and practical project, thank you Sir so much 🙏

[@brettwestwooddeveloper]

You are welcome! Thanks for the sub!

[@Sylar7773]

Thank YOU very very very much!!!

[@brettwestwooddeveloper]

You're welcome!

[@eshw23]

Nice video, a video on Nextjs Api routes with CRUD functionality would be great, preferably using React query and axios instead of fetch, along with dynamic routes on the client side to if possible, maybe a simple todo app tutorial or something. Thanks!

[@brettwestwooddeveloper]

Great idea! Can definitely work on that!

[@johnysnowy35]

Thanks, I was struggling with NextJS (coming from React) and this example was perfect to understand the basic nuances.

[@chetanpanchal888]

Hi Brett, This tutorial is really helpful but I different use case - I have home page and search results page I have search bar on both the pages now my problem is when I search from result page I am able to getSearchResults but from home page I am unable to handle this. Any idea or suggestion?

[@codedwebs]

Hi, Brett you are doing great work. i think i want to point out is that I feel your voice is low. On 100% volume sometime its hard to understand what you saying.

[@brettwestwooddeveloper]

Thanks for the tip!

[@kenthefley2226]

Brett, just out of curiosity, Why did you use an API endpoint instead of just fetching the data from a server component in the app router?

[@brettwestwooddeveloper]

I was using the useState hook and wanted my fetch to come from a server. I assume you can probably do what you are saying as well. I think there is multiple ways to do one thing

[@kenthefley2226]

@@brettwestwooddeveloper thanks Brett. I'm glad you did it this way. I need to learn the API routes.

[@ozgursar5386]

This is usually done to hide sensitive data such as API keys from the client-side

[@prathamesh_dalvi9421]

can u make a video oif how to merge elastic search to this search bar

[@nourara-sl1hu]

nice video , can you help me to find this benift in VC code when you start writing the first word the vc code gaves you the complete sentence

[@brettwestwooddeveloper]

github copilot

[@loc5706]

how about search as you type? why need to press enter?

[@temzeks]

I want to implement same approach for a search, but with multiple dropdowns, would this approach still be viable for me ?

[@brettwestwooddeveloper]

Yes this approach would be viable for you still.

[@webber5629]

Thanks , But how to fetch the coins if the user types anything in input automatically fetching that data without need to click search button ?

[@dingusn]

You would just call the handleSubmit function in the onChange in the input rather than on the button.

[@stevebendersky2056]

using api folder with route.js is considered to be more correct? because I don't see any difference if I just use regular fetch in the component itself

[@brettwestwooddeveloper]

yes route.js or route.ts is the correct syntax

[@stevebendersky2056]

okay thanks. and then I could use it within async server component?@@brettwestwooddeveloper

[@stevebendersky2056]

and also, how can I access cookies from the route? as I want to send the user accesstoken in each fetch request through Authorisation

[@stevebendersky2056]

Why use traditional useState and useEffect? why not just useSWR to fetch the data?

[@brettwestwooddeveloper]

I like using useState and useEffect

[@nuvola-b]

this is not server side. whats the point of writing nextjs 13 if you use it client side? it becomes basic react.

[@brettwestwooddeveloper]

Yea thought the same idk though

[@codingtranquility]

From my understanding you would use client side for more dynamic pages, and server side for more static. The advantages of next would be the cooked in optimizations, and it being more maintained. For this kind of application you could just use Vite, but you'd be missing out on Next's router etc.

[@brettwestwooddeveloper]

you are correct.@@codingtranquility

[@yaswanthgosula2468]

This is old way of data fetching. Next JS documentation data fetching recommends fetching on server side. Better to use SRC

[@brettwestwooddeveloper]

I have a video on data fetching with server side, technically you can do client or server, but if you want to use React hooks then it must be client

[@dominiondaniel1585]

You did a great job but please,next time go straight to the point.We already know how to create a next app.

[@brettwestwooddeveloper]

Thank you!

[@yaswanthgosula2468]

This is old way of data fetching. Next JS documentation data fetching recommends fetching on server side. Better to use SRC

[@nusesteroide]

Can you provide link to do it server side ?