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
Watch video Next.js Modal with Parallel & Intercepting Routes, shadcn/ui Dialog online without registration, duration hours minute second in high quality. This video was added by user Dave Gray 07 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 26,273 once and liked it 1 thousand people.