Dynamic Catch-all Routes in NextJs 14

In this video, we'll look at dynamic routes, catch-all routes, and optional catch-all routes in NextJs 14.
👉🏼 My courses
→ www.hamedbahram.io/courses
👉🏼 Project source code (Github)
→ github.com/HamedBahram/next-d...
👉🏼 Next shadcn template (Github)
→ github.com/HamedBahram/next-s...
👉🏼 Work with me
→ www.hamedbahram.io/hire
Chapters
0:00 Intro
1:00 Documentation
10:30 Project setup
12:40 Shared layout
15:00 Catch-all route
20:00 Active links
22:20 generateStaticParams
26:25 Recap

[@rogerscript]

Your videos are awesome Hamed, please, never quit doing them...

[@hamedbahram]

Thanks, I appreciate that!

[@kazmi401]

Thank you, Hamid. I truly wish I had a teacher like you during my High school days and in College now. Each video on your channel contributes significantly to my growth as a developer. Thanks once again. 🙏

[@hamedbahram]

Thank you! I'm so glad to hear that I've been able to help you in your journey.

[@raphauy]

Hamed thank you very much! Your explanations are the best

[@hamedbahram]

Glad to hear that!

[@sergheic31]

Great explanation as always! Even if I knew this, your example project made it stick into my head, thanks!

[@hamedbahram]

I'm glad to hear that 🙂

[@hassanallen1823]

thanks for your video,it was very helpful for my project just in time, I did similar to this but didn't know about all catch all folder witch help me organize it better

[@hamedbahram]

Awesome, I'm glad it helped!

[@MuhammadHaseebAhmed]

Eid Mubarak Brother .Thank You For Your Contribution In React Community .

[@hamedbahram]

It's my pleasure

[@mohsenmohammadi9205]

Thanks Hamed, you are awesome bro 😎

[@hamedbahram]

Thanks man! I appreciate it.

[@user-pe4wq2dv7q]

Very helpful. As for now, there is not a lot of info about Next 14.

[@hamedbahram]

Glad it was helpful!

[@3relativesGroup]

Absolutely perfect explanation!

[@hamedbahram]

Glad you liked it!

[@dimahinev]

thank you bro, highly appreciate it

[@hamedbahram]

My pleasure!

[@yusufelmountahi5208]

really great video thank you

[@hamedbahram]

You are welcome! Glad it helped.

[@MiladJoodi]

Thanks a million 🎉

[@hamedbahram]

My pleasure!

[@AndriusLauFullstack]

Nice explanation. Currently working on my side project, and I have a case staticPath/[location]/[type]/[criteria]. The idea was to duplicate code for each dynamic path or catch-all routes. Duplication allows more granular control without 'else if' cases. And catch all routes is good because in my case is just a filter option and all content will be almost the same (just different titles, metadata for SEO). I am also interested in how you sanitise slugs, or do you trust security features that come from ORM?

[@hamedbahram]

Thanks! I personally prefer the path with less code duplication. You can also sanitize slugs or search parameters using something like zod.

[@sammtanX]

this is such quality content

[@hamedbahram]

I appreciate that!

[@patolorde]

Very good

[@hamedbahram]

Thanks!

[@darawan_omar]

explained very nice, but i have a question we can use the cookies inside generateStaticParams ?

[@hamedbahram]

Thank you! Give it a try and let me know :)

[@darawan_omar]

@@hamedbahram i got this error how we can solve it ------> headers() expects to have requestAsyncStorage, none available

[@techGPT97]

how catch all different from by default params coming in page it also gives array of params

[@hamedbahram]

Only catch-all and optional catch-all routes have an array of strings for the params. The regular dynamic route just returns a string.

[@techGPT97]

@@hamedbahram thanks for your content brother

[@hamedbahram]

@@techGPT97 my pleasure brother!

[@AamirSohail-k7b]

hello

[@hamedbahram]

Hi 👋🏼

[@kickflipz]

My eyes man.. please use dark mode in your vids 🥲

[@hamedbahram]

Absolutely! I'll that in mind