Learn Search Params in Next.js 14 by building a project! React | Tailwind | shadcn/ui

Hello, my friends and fellow developers!
In this video, we cover how you can use query search params effectively in the Next.js 14 app router by building a little project! We also use Tailwind CSS, shadcn/ui, and TypeScript!
Let me know in the comments below if you want more Next.js content or something else.
🔗 Links in the video
Source Code: github.com/max-programming/sh...
Shadcn UI: ui.shadcn.com
Usehooks TS: usehooks-ts.com
Timestamps:
00:00 - Introduction & Demo
01:12 - Next.js and shadcn/ui components
02:00 - Adding Tabs
04:36 - Search param for the active tab
11:52 - Adding the search bar input
12:57 - Using hooks by Next.js
15:11 - Changing search params with input
21:09 - Deleting a search param
22:15 - Setting a default value for input
23:15 - BONUS - Debouncing
Other Tutorials:
⚛️ React and Material UI Todo App: bit.ly/reactmattodo
🟨 Other JavaScript videos: bit.ly/jstutorials
📘 Visual Studio Code videos: bit.ly/vscodevids
🔋 Build a Battery App in JS: • 🔋 Build a Battery Info...
Connect 🔗 :
Twitter: / maxprogramming1
Facebook: / max-programming-103081...
Github: github.com/max-programming/
Suggest, ask doubts in the comments, and share these videos to help!
Thanks for Watching!
#reactjs #nextjs14 #nextjs13 #javascript

[@ismaeltinta6118]

thanks. been racking my brain for 2 days about convenient way to implement this

[@nayana622]

Thanks for the great video! Your explanation was super clear and really helped me. Looking forward to more content like this! 🙌

[@alexdin1565]

thats amazing bro please make more tutorials about next.js
my first time i like RUclips suggestion they suggest your video , and its perfect

[@MaxProgramming]

Glad to hear that buddy! For sure I'll make more content on Next.js

[@danish7335]

First one comment, Btw love your work usman. Keep it up

[@lautaro17]

Great video ! Which font do you use ?

[@MaxProgramming]

It's called Monaspace

[@hbela1000]

very good, thx.

[@bhaveshp.dev0]

My suggestion add padding to background so that your facecam is a bit away for corners of the video.

[@MaxProgramming]

Thanks! I think you mean margin haha. Will keep this in mind

[@malikgenius4u]

Can you please use shadcn Command component for search, its awesome but commandlist / dropdown pushes other objects down on the page .. i dont know how to avoid that.

[@MaxProgramming]

I'll investigate what you're facing and possibly make a video on it

[@natiperetz5807]

Very helpful! just how can do this if we are using grouped routes?

[@natiperetz5807]

The problem I am having is when you the app layout and have 3 grouped routes and each group has its own layout. When doing this I can't seem to get the URL. Its just an empty {}

[@MaxProgramming]

I am unable to reproduce the same. I tried but it seems to work for me. Three different groups, in there 3 different layouts and also 3 different routes inside.
Can you maybe link the GitHub repo?

[@natiperetz5807]

@@MaxProgramming Yes! I will get this uploaded for you ASAP. To clarify, yes, if I have a page.tsx and layout.tsx in the app folder it does work as you showed but I have my project set up where I removed the page.tsx and layout.tsx from app folder (I did this according to the nextjs documentation), and all 3 groups have their own layouts. Now I want a certain group to have its own navbar with special search functionality using the URL as you taught us. When I try to add your logic to the navbar in "group 1" I get errors. Not sure how to capture the URL searchParams...

[@MaxProgramming]

@natiperetz5807 Can you also comment the error you get here?

[@natiperetz5807]

@@MaxProgramming Sure! Error: Cannot read properties of undefined (reading 'tab') I think i gt this because of the way I have my folders setup...I shared the git repo here were you able to see the link I shared?