Modal in Next.js & React | Create a Dialog Component

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn how to create a reusable modal in Next.js & React. You will learn the difference between a modal and a dialog, one big difference when building a modal for Next.js vs React, and why managing the modal state with URL params is a better choice than useState. 💖 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 👇 Follow Me On Social Media: GitHub: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ 🔗 Source Code: https://github.com/gitdagray/next-dialog-modal Modal in Next.js & React | Create a Dialog Component (00:00) Intro (00:15) Welcome (00:37) Lesson Goals (01:05) Starter Code Review (02:29) Creating the Dialog Component (13:51) Adding the Dialog to a page (15:00) A Big Difference between Next.js & React (17:24) Enabling Server Actions in Next.js (18:20) Viewing the differences between Modals & Dialogs (21:03) Why manage state with URL Params? (22:15) Wrap up 📚 Tutorial References: 🔗 Next.js Official Site: https://nextjs.org/ 🔗 Next.js Server Actions: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions Was this tutorial about building a Modal in Next.js & React helpful? If so, please share. Let me know your thoughts in the comments. #nextjs #modal #dialog