Next.js Modal with Parallel & Intercepting Routes, shadcn/ui Dialog

Video Description

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