Nicely done and well explained brother I've built it in my app! I would love to see prisma & providers & credentials with Next-Auth. Here's a challenge for you 🤝🤝
@@mickeykadimov7128 Thanks for the idea. I do have a video on next auth and credentials provider but that was with pages router. Maybe I'll make an updated one for app router ruclips.net/video/fqXC2V-MSV4/видео.html
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 {}
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?
@@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 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?
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.
Did anyone experience layout shifts and scroll issues when implementing this? When I use it to switch tabs on my settings page and let's say I scrolled b4 searchParams finished updating, It causes my layout UI to shift and and hides the top part of the layout. I think it's related more to the tabs components maybe tho....
You're right. The layout shift does happen when navigating from one tab to another. I guess that happens because the page gets re-rendered (as we navigate with Link component to modify the search params) Not sure what could possibly be the solution. But if I find one, I'll reply Thanks for pointing this out!
![Quando Rondo - Grow Up [Official Music Video]](http://i.ytimg.com/vi/8zFnCg3BO4Q/mqdefault.jpg)
exactly what I was searching for a week 😮💨😮💨😮💨😮💨
Very good video. Thanks for making this!
thats amazing bro please make more tutorials about next.js
my first time i like RUclips suggestion they suggest your video , and its perfect
Glad to hear that buddy! For sure I'll make more content on Next.js
thanks. been racking my brain for 2 days about convenient way to implement this
Nicely done and well explained brother I've built it in my app!
I would love to see prisma & providers & credentials with Next-Auth. Here's a challenge for you 🤝🤝
@@mickeykadimov7128 Thanks for the idea. I do have a video on next auth and credentials provider but that was with pages router. Maybe I'll make an updated one for app router
ruclips.net/video/fqXC2V-MSV4/видео.html
Thanks for the great video! Your explanation was super clear and really helped me. Looking forward to more content like this! 🙌
First one comment, Btw love your work usman. Keep it up
Great video ! Which font do you use ?
It's called Monaspace
very good, thx.
Very helpful! just how can do this if we are using grouped routes?
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 {}
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?
@@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...
@natiperetz5807 Can you also comment the error you get here?
@@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?
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.
I'll investigate what you're facing and possibly make a video on it
My suggestion add padding to background so that your facecam is a bit away for corners of the video.
Thanks! I think you mean margin haha. Will keep this in mind
Did anyone experience layout shifts and scroll issues when implementing this?
When I use it to switch tabs on my settings page and let's say I scrolled b4 searchParams finished updating, It causes my layout UI to shift and and hides the top part of the layout. I think it's related more to the tabs components maybe tho....
You're right. The layout shift does happen when navigating from one tab to another.
I guess that happens because the page gets re-rendered (as we navigate with Link component to modify the search params)
Not sure what could possibly be the solution. But if I find one, I'll reply
Thanks for pointing this out!