Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Dave Gray.
Dave Gray
22897
Next.js Modal with Parallel & Intercepting Routes, shadcn/ui Dialog
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Build a Next.js Modal with Parallel & Intercepting Routes and the shadcn/ui Dialog component. In this tutorial, you will learn how Next.js Parallel & Intercepting Routes can work together to provide a modal and fallback route segment.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/nextjs-modal-intercepting-routes
🔗 My Next.js Videos: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Next.js Modal with Parallel & Intercepting Routes, shadcn/ui Dialog
(00:00) Intro
(00:14) Welcome
(00:26) Motivation
(01:13) Overview & Prerequisites
(01:57) Starter Project
(05:52) Run the project
(06:45) Adding shadcn/ui
(09:35) Component review
(11:10) Create a Parallel Route
(13:24) Create the Intercepting Route
(17:13) Create the Modal with shadcn/ui
(21:35) Applying & Viewing the Modal
(24:11) Forms in a Modal
📺 Video References:
🔗 Next.js Parallel Routes: https://youtu.be/M836RZxReHU
🔗 Getting Started with shadcn/ui: https://youtu.be/v0_AT8zaLo8
🔗 Next.js Light & Dark Mode: https://youtu.be/7zqI4qMDdg8
📚 Tutorial References:
🔗 Next.js: https://nextjs.org
🔗 Next.js Parallel Routes: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
🔗 Next.js Intercepting Routes: https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes
🔗 shadcn/ui: https://ui.shadcn.com/
🔗 shadcn/ui Dialog component: https://ui.shadcn.com/docs/components/dialog
Was this tutorial about Next.js Modals with Parallel & Intercepting Routes and shadcn/ui helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #modal #dialog
Build a Next.js Modal with Parallel & Intercepting Routes and the shadcn/ui Dialog component. In this tutorial, you will learn how Next.js Parallel & Intercepting Routes can work together to provide a modal and fallback route segment.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/nextjs-modal-intercepting-routes
🔗 My Next.js Videos: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Next.js Modal with Parallel & Intercepting Routes, shadcn/ui Dialog
(00:00) Intro
(00:14) Welcome
(00:26) Motivation
(01:13) Overview & Prerequisites
(01:57) Starter Project
(05:52) Run the project
(06:45) Adding shadcn/ui
(09:35) Component review
(11:10) Create a Parallel Route
(13:24) Create the Intercepting Route
(17:13) Create the Modal with shadcn/ui
(21:35) Applying & Viewing the Modal
(24:11) Forms in a Modal
📺 Video References:
🔗 Next.js Parallel Routes: https://youtu.be/M836RZxReHU
🔗 Getting Started with shadcn/ui: https://youtu.be/v0_AT8zaLo8
🔗 Next.js Light & Dark Mode: https://youtu.be/7zqI4qMDdg8
📚 Tutorial References:
🔗 Next.js: https://nextjs.org
🔗 Next.js Parallel Routes: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
🔗 Next.js Intercepting Routes: https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes
🔗 shadcn/ui: https://ui.shadcn.com/
🔗 shadcn/ui Dialog component: https://ui.shadcn.com/docs/components/dialog
Was this tutorial about Next.js Modals with Parallel & Intercepting Routes and shadcn/ui helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #modal #dialog