MENU

Fun & Interesting

How to Build an Email Confirmation Workflow with Next.js, Resend, and Prisma

James Q Quick 3,305 lượt xem 9 months ago
Video Not Working? Fix It Now

Let's create an email confirmation workflow using Next.js, Resend, Prisma, and Xata.

*** Resources ***
Source Code - https://github.com/jamesqquick/email-verification-nextjs-resend-xata-prisma

Xata - https://xata.io/
Resend - https://resend.com/
Prisma - https://www.prisma.io/

Deals for Devs - https://dealsfordevs.com/

**Newsletter**
Newsletter 🗞 - https://www.jamesqquick.com/newsletter

**DISCORD**
Join the Learn Build Teach Discord Server 💬 - https://discord.gg/vM2bagU

Follow me on Twitter 🐦 - https://www.twitter.com/jamesqquick
Check out the Podcast - https://compressed.fm/
Courses - https://jamesqquick.com/courses

**QUESTIONS ABOUT MY SETUP**
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. https://www.jamesqquick.com/uses

*** Timestamps ***
00:00 - Intro
00:15 - What We'll Build
04:45 - Build Email Subscribe Form
08:15 - Creating the Subscribe Action
14:00 - Prisma Setup
15:15 - Database Setup with Xata
18:15 - Creating the Subscriber in the DB
25:10 - Adding Uniqueness to Emails
29:00 - Resend Setup
30:00 - Setup React Email
31:00 - Creating the Confirmation Email with React Email Components
34:20 - Running the React Email Dev Server
36:40 - Sending the Confimation Email with Resend
44:00 - Creating the Email Verification Logic
48:40 - Adding an Error Component
50:30 - Show Loading State in Form Button
51:30 - Toast Notifications
52:45 - Wrap Up

Comment