Sending Email Using Resend and NextJS 14 | Tutorial | Demo

hey everyone welcome back to codc Hub in this video I'm going to show you how to send email using nextjs 14 in this project I'm going to use nextjs 14 with typ script tailin CSS reent react email and react hook form so if you are watching this video in first time don't forget to subscribe my channel and hit the like button let's go to video [Music] now I'm going to explain some scenario for you for the example I am your doctor and you are my patient so you need to make appointment for me we have website and you can make the appointment using that website after making your appointment I need to get your details for that we can use this method first of all you need to have your own domain for this first I'm going to show you my domain you can use any on domain for this in here you can see my domain name under this name section we need to configure this DNS record with our recent account now I'm going to log to my recent account in here you can see this recent website to log to your account you need to click on this sign in in this time I'm going to use this login with Google after log to your account you need to go to this domain section and you need to click on this add domain and we need to provide our domain name in here after providing our domain name we can select region by default they are selecting their free region for us if you need to change your region you need to go with Pro account after that you can click on this add button now we can start to verify our DNS record now I'm going to add this recent details to my domain name for that I'm going to click on this DNS now I need to add this all record to my DNS record [Music] after adding that all DNS record we need to click on this verify DNS record a few few minutes later after verifying our domain we need to create API keys for that you need to click on this API keys and in here you need to click on this create API key and in here you need to provide your API key name after providing API key name we need to click on this add now I'm am going to copy this my API key and I am going to paste in my notepad after that you need to click on this done now we can start to build our project first of all I am going to make a new folder in this folder and I'm going to open that with my text editor now I'm going to create nextjs project [Music] now I'm going to run this project you can see output like this now I need to install some dependencies for my project now I'm going to do that one first I'm going to install tailin CSS forms now I need to config my Tailwind config dots file I'm going to remove this because I don't need to use that now I going to install react hook form now I'm going to install react email components now I'm going to install react hot toast finally I'm going to install Reon now I'm going to remove some un knowed things in this project now I'm going to add EnV file for this project now I'm going to paste my recent API key in here now we can start to create our folder structure before that I'm going to show you my form design in here you can see my form design in this video I'm not going to use any figma design for this let's go to create our folder structure first I need to create folder name components and I need another one folder API inside of this app folder inside of this API folder I'm going to create another one folder called send now I'm going to create three file inside of this mic components folder first one is client provider second one is contact us form third one is email message [Music] I need to add another one file in my send folder that called route. TS first I'm going to start with layout. TSX file in here I need to change this metadata after that I'm going to create functional component for this three file this one for react toast first I'm going to use use client after that I need to import toaster I need to provide position I'm going to set that as top center now I need to import this to my layout. DSX file now I'm going to move to my next file page. DSX file in here I need to add another one new and another one H1 tag inside of this my main de now I'm going to add that one in here I need to add my text schedule and one and in here I need to add contact us form I'm going to remove this one and I am going to import that contact class form in here now I'm going to add some style for this [Music] now I'm going to run this and I'm going to check my output in here you can see my output now I'm going to start to build this contct us form first I need to use use client and I need to import use form and toast [Music] now I need to convert this do as form and I need to remove this text I need to add main two D inside of this my form tag and I need to add another eight D tag inside of that my main two D tag now I'm going to do that one now I'm going to add some style for this [Music] [Music] [Music] now I need another main Dew in here inside of that I need another to de and feels it now I'm going to create that radio button and that message and finally that checkbox [Music] [Music] [Music] our form creation part is now completed now we need to handle this user input field by using react hook form now I need to use register handle submit reset form use for [Music] now I going to use this register with my user input field in here we need to provide name for this register that name need to be unique and in here we can use some validation for this register I'm going to use required true [Music] for this register options we can use more than one condition in here I'm going to use Min and for this age [Music] for this mobile number I'm going to use Min length and max length [Music] we can use some pattern for this now we can use handle submit from use form for that I'm going to use on submit and I'm going to pass on submit in here now I need to create this function now I'm going to create email message it mean our email template we can see this output only when we are received this email first I need to import some components from my react email compounds now I'm going to do that one [Music] now I need to get user input as a prop now I'm going to do that one [Music] now I'm going to create my email template [Music] [Music] now our email message part is completed now I am going to work with my route file first of all I need to import necessary modules and components after that we need to initialize a new instance of the recent service with API key now we need to Define asnc function to handle post request now we need to restructure our request data now we can use TR catch block to handle the process of sending email now we need to provide this all detail for the from we need to use our verified domain in here we need to provide email address we need to send the email in here I'm going to use my email address and we need to provide subject for this react we need to pass our email message with prop if the email is successfully sent we return the response data as Json using next response now our route part also completed now we can move to our next part in earlier step we declare the function now I'm going to complete that first I need to send form data I need to provide URL in here now I need to configure the request first I need to use method next I need to use headers now I need to use body after that we need to handle response for that I'm going to use dot then [Music] finally I need to reset the form I think now we can test our form first I'm going to check without entering any data in here you can see we need to provide our data now I'm going to use some sample data for this [Music] now I'm am going to click on this schedule appointment you can see this TOS message now I'm going to check my email in here you can see my email and in here you can see my all details and I have do some mistake I need to get this message to start now I'm going to do that one now everything is fine thank you so much for watching this video don't forget to subscribe my channel and hit the like button

Channel: CodeCrafterHub

Views: 168

Keywords: Getting Started With Next 14, Next 14, Next 14 App, Next 14 Development, Next 14 Project, Next 14 Tutorial, Next.js, Next.js Development, Next.js Tailwind CSS, Next.js Tutorial, how to use resend, react hook form, how to use react hook form, react email component, react email, how to send email in nextjs 14, email with next js 14, resend with nextjs, how to setup resend, domain configuration resend, resend, tailwindcss forms, forms, typescript, nextjs, tailwindcss

Id: LyPt0FI3-oM

Length: 36min 19sec (2179 seconds)

Published: Fri May 24 2024