6 Different Methods to Create Search in Next.js 13

We will build the same search functionality with 6 different methods. First, local search with 'useState' and 'Jotai'. And, then we will build client-side search with 'swr' and 'react query'. Finally, we will build server-side search with 'Search Params' and 'Server Actions'.
Source Code: github.com/batuhanbilginn/sea...
Live Version: search-nextjs13.vercel.app/
- timestamps -
00:00 - Intro
00:52 - Project Overview
02:28 - 1) Local Search: useState Hook
06:41 - 2) Local Search: Jotai
11:05 - 3) Client-side Search: useSWR
17:59 - 4) Client-side Search: React Query
22:15 - 5) Server-side Search: Search Params
36:00 - 6) Server-side Search: Server Actions
#nextjs #typescript #search #serveractions #jotai #react

[@rafaelgomes3054]

Love your content! I'm glad to see you zoomed in a bit on the code! I saw an older vid and it was too small to read what you were doing! Now it's great! Gonna subscribe! I love that you are tackling more complex problems than other creators! Keep it up!

[@makrdev]

Oh thank you Rafael. Yeah I’m trying to improve the experience and quality. 🫶🏼

[@codenerd7823]

I am glad youtube brought me here, it was fun and educating video. Wish to see more from you on YT. Keep it up, and keep growing...

[@makrdev]

I’m glad you liked it 🫶🏼

[@Davxinci]

Amazing work! Thank you for the breakdown very informative and helpful! I'm sure english is your 2nd + language but you did very well, excited to see more - keep 'em coming.

[@makrdev]

Yeah, it’s my second language. I think I’m getting better with each video I make. Thank you for your kindness 🫶🏼

[@baybay1234]

Thanks for breaking down the methods of handling search in nextjs 13. One thing I’d like to point out is that I find the term “local” used here to describe the first two methods is a bit confusing because they are technically also client-side search, except that they don’t use 3rd party libraries such as react-query and swr to handle caching and etc. other than that, awesome and informative video!

[@makrdev]

Thanks 🙏 Yeah you are right but I couldn’t find a proper definition except ‘local’ 😑

[@faisal_dev951]

tysm learned alot about ways of implementing search

[@makrdev]

Thank you so mush Faisal!

[@xiiEJRAM]

Your content about Next js is unique keep going 🔥🔥🔥

[@makrdev]

Thank you dude ❤️

[@backendfyi]

you earned a new subscriber. thank you for this video

[@makrdev]

Thanks a lot 😊

[@backendfyi]

@@makrdev you deserve it pal

[@pidchashyi]

Your videos are the best. will you do a big nextjs app?

[@makrdev]

Thanks! What do you have on your mind?

[@adarshrathi8265]

excellent

[@Nahary]

I needed this! thank you. do you use prisma?

[@makrdev]

Great to hear that 👍 Yeah, I use sometimes. Do you have a content idea?

[@Nahary]

@@makrdev thank you for the reply! I am currently struggling with implementing pagination with Prisma and NextJs. could you make a video on this? (in the Api routes and client side). thanks again.

[@makrdev]

@@Nahary I’ll add this into my list 🤞

[@OnlyJavascript]

@@makrdev please please make complete tut on next auth. not just regular register /login. add password reset, roles and permissions, mailing functionality. (stack: next, prisma, ts, react query). it would super useful. no good tut available in the YT. your content will be the first. thanks in advance.

[@QtheCoder]

Your audio and picture is crispy. What equipment do you use?

[@makrdev]

Thanks! The mic is Thronmax M1 Pro and the cam is Sony A73.

[@user-vq8nl7zy9m]

with server action, if i use 2 tabs to access , it returns the same movies in both tabs

[@raiyansarker]

How do you record your videos?

[@makrdev]

What do you mean by how?

[@nusesteroide]

good content. I am trying to do the first case but fetching data from the server and I am not being able to do it.

[@makrdev]

Thanks join our discord so I may help.

[@SR-zi1pw]

Nice video mate 🫡 can use fuse for fuz search

[@makrdev]

Thank you bro 🤜 I didn’t understand what you asked 😑