Next.js Modal Form with React-Hook-Form, ShadCN/UI Dialog, and Server Actions - Tutorial
Offered By: Dave Gray via YouTube
Course Description
Overview
Learn how to build a Next.js Modal Form with React-Hook-Form, ShadCN/ui Dialog, Server Actions, and Validation in this comprehensive tutorial. Explore the process of creating a modal form that launches from a table of results, a common use case in business applications. Dive into key concepts including TypeScript integration, TailwindCSS styling, and leveraging Next.js features. Follow along to implement type-safe data fetching with zod-fetch, construct form components using react-hook-form, and create server actions with Zod validation. Gain practical experience in applying and rendering modals, handling form submissions, and integrating confirmation pop-ups. Perfect for developers looking to enhance their Next.js and React skills with real-world application development.
Syllabus
Intro
Welcome
What's Your Story?
Next.js Modal with a Form
Prerequisites
Project Dependencies
Example App
App Components & Routing
Fetching Type-Safe Data with zod-fetch
Form Component with react-hook-form
Save Alert Confirmation Pop-up
Applying & Viewing the Modal
onSubmit Function
Next.js Server Action w/ Zod Validation
Rendering the Form with Server Action Responses
Taught by
Dave Gray
Related Courses
Learn Zod in 30 MinutesWeb Dev Simplified via YouTube Full Stack Tutorial - NextJS, TRPC, T3, TypeScript, Prisma, Tailwind, Zod
Coding Tech via YouTube Nuxt 3 & Nitro
Learn With Jason via YouTube Keep Alive Your TypeScript Definitions Using Zod
JSWORLD Conference via YouTube Build a Sanity CMS Powered SvelteKit Blog
egghead.io