Adding a Search Feature to a Server Component | Next.js App Router

#nextjs13
Learn how to use URL search parameters to add search functionality to a server component in a Next.js app router project.
0:00 - Intro
1:13 - Overview of page code
2:01 - Capturing the user's input
2:41 - Update URL with search param
4:13 - Keeping the url and input in sync
4:45 - Updating the table based on search query
5:42 - Debouncing
💻 RESOURCES:
Next.js Learn Course: nextjs.org/learn
🤝 LET’S CONNECT:
◆ Twitter: / steph_dietz_
◆ Github: github.com/StephDietz
◆ Blog: steph-dietz.com

[@techdockerz]

WOW !!! to the point showed the professional production-ready example. better than a long tutorial ends up in no way.

[@davidlintin]

Perfect tutorial. Looking to use this in my project. But I have additional filters so will probably require a search button instead of live updating.

[@veljkomaksimovic]

Great tutorial. Exactly what I was looking for!

[@AliAkgul-ym6wz]

I've been losing my sanity trying to implement client and server components together for this functionality. Thank you so much for this.

[@yiyin4917]

This is what I'm looking for, straightforward and easy to understand. Thank you, Stephie.

[@maskman4821]

This is exactly what I am looking for, thank you Stephanie 🙏

[@Demdevvy]

I took a lot away from this video and it helped fill in a lot of gaps in my understanding. Thank you.

[@VincentFulco]

Great walkthru , thank you.

[@codeSTACKr]

Great tutorial 🙌

[@mohammadDeveloper2431]

Great mam it's awesome smoothly understand step by step thank you mam Please keep on making more video new features in next js 14

[@vipinsanthosh2230]

Great resource, thanks a lot

[@filipkalny6594]

Great video, but I'm disappointed that you didn't go into more depth. The transition hook would be perfect so that we can see an indicator of a pending loading state.

[@codeChuck]

Simple and professional! Cool stuff! You included 'use-debounce' BLAZINGLY FAST :D

[@MiladJoodi]

Thanks a million ♥

[@loudboomboom]

Wooot, tysm!

[@JuanMoisesTorrijos]

This is exactly what I needed. Thank you very much!

[@Svish_]

Could you make a video on how to write/cache files during build of nextjs in a way that's compatible with vercel and serverless? Say for example you have a blog and all blog posts stored as text files, and you want to create an index/map of all the posts during build so that it's quick to generate lists of the latest posts, sitemaps, rss feeds, and so on. Where/how should I hook into the build process to create this index? Where should I write it to?

[@paakofibamfoquaicoe4193]

Awesome. Please should we expect a video version of the new nextjs learn content?😊

[@this.stephie9927]

As of right now there are no plans to create a video version of the course 😕

[@paakofibamfoquaicoe4193]

@@this.stephie9927 Woow!. That was quick. Thank you.

[@naufalnasrullah6965]

is it possible to not using client components when dealing with search feature?

[@eldan90]

The search box is a client component due to the input and onChange events, the rendering of results can be server rendered.

[@twitchizle]

easier with remix