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 ➜   / 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 ➜   / discord  

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

🔗 Source Code Example: https://github.com/gitdagray/nextjs-m...

🔗 My Next.js Videos:    • Next.js Tutorials for Beginners  

👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / 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:    • NextJS Parallel Routes Explained with...  
🔗 Getting Started with shadcn/ui:    • Build Your UI Component Library in Re...  
🔗 Next.js Light & Dark Mode:    • Next.js Dark Mode with No Flicker + T...  

📚 Tutorial References:
🔗 Next.js: https://nextjs.org
🔗 Next.js Parallel Routes: https://nextjs.org/docs/app/building-...
🔗 Next.js Intercepting Routes: https://nextjs.org/docs/app/building-...
🔗 shadcn/ui: https://ui.shadcn.com/
🔗 shadcn/ui Dialog component: https://ui.shadcn.com/docs/components...

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