How to Send Emails From Next js Website with Resend API

many years ago Humanity used the pigeon post to deliver mail from A to B pigeons play the role of API which is called when somebody wants to send a message modern Technologies allow us to fill out a simple form and order a pizza in a few seconds today I will teach you how to create a form in your nextjs website and send the form data directly to the email using recent API let's start first we need to install the nextjs application using the following command complete configuration questions and hit enter after the installation is successful run our project to ensure everything is okay and it works now we need to remove the pre-installed mark up inside the page.js because I will implement the form structure here also I would like to clean up all Global CSS in our project okay let's start with the very first form markup implementation I will create a form with the tag Legend inside after I use the Tech field set to group form inputs now we can add the first input type text here with the name and placeholder attributes next just CL it and replace the attributes data it is going to be the last name field the same action is taken with the email input and finally we can create a text area element for a client message at the end of our form I add a simple submit button our G6 template is ready the next step is styling I will use CSS modules here to keep my project simple but feel free to use any styling you want CSS modules work very easily you just need to import the Styles object and pass a required class name as a Styles key I will start with the top level container styling call it hero and add a minan hiide property make it a flex container and P all child components on the page center after setround image and background size cover to fill all available space now let's style our form set the class name for to the js6 element and go to the CSS file Define the class form set the max s property and add some pents I'd like to blur theground behind the form so I should use B drop filter here round corners with the Border radius and add border value finally I'm going to use box Shadow and the form is ready now after let's style our title nothing special here just specify font size text color font weight and margin also put the text in the center using the text align property I will add the group class name to the field set element to remove the default border here and make it Flex okay we're ready to make input Fields look pretty for this I'm going to use input and text area class names the styles for these fields are very similar so I'll set the CSS properties for both of them set the Flex Basic property to make input full wids remove the background color and add mean height 42 pixels I'd like to add a little SPAC in with the marging bottom and set eight pixels patterns the text color will be like yellow light or something like that using the Border property we can render the bottom line of our inputs turn off default outlines and set transition property to make future hover and focus effects a little smoother and don't forget to reset default borders okay done now let's quickly switch to placeholder styling it's pretty easy just need to specif color and font size after I will create a simple hover and focus effect by changing the Border color property good the final step of our styling is the submit button make it flex and center the content inside using justify content and align items prop add mean height and don't forget to pass a class name to the j6l okay go back to the buttom I will make it a full size also and declare a ground color here set patterns font size margin top and font weight properties round corners with border radius and that's it now let's jump to the recent API as I said at the start of the video we are going to use this service to send our for data directly to the email you need to create an account here and go to the API Keys tab to generate a new API key after we should store it somewhere so I suggest you to create a end file and put an API key inside with the following name okay we will come back to the key a little later because now I would like to create an email template component so I strongly recommend you follow my code here because it's very easy to get unexpected errors during email s execution I Define the email template component with four props every single prop matches a form field name now let's make a basic layout of our email it will contain a title and a couple of paragraphs to render every prop value the left part of the paragraph is going to represent the data label and the strong TCH is for Value we should clone the first paragraph for all other cases and replace labels and values okay it seems good now we can start to write some IM sending logic there are two ways in nextjs to implement it server side with server actions and the client s side with API rout I picked the last one for this tutorial before we start we should install recent package to our project so we should open recent docs and find the example for next shifts scroll down to the sending p and copy the following code after that let's create an API route inside our application to call it for email send according to the na CHS doc I create an API folder send folder with a root JS file inside and past our code here it is going to be our endpoint we should specify a correct pass here to our imal template component and make sure that the name of the API key environment varable matches ours okay looks good now I would like to write form data serializing logic so as I said before we need to specify fexs on the top level of the file that we are going to work with form on the client inside also we should import the UST State hook here now I declare Aon and it will be an initial value for our form Fields I Define it as an object with four Keys every key meshes input or text areay name attribute and its initial value will be an empty string after I create a state using the use State hook with the initial value prop to control our form data now I need to link every input value with a certain State key it's pretty easy to do here okay there finally we can create a Handler function to call it on every input change to update the input value in our state it will be a narrow function with an event argument inside and all we have to do is to update our state with a new input value now we can put this Handler as a call back inside the onchange event of every in good let's check how it works as you can see in the console we get a new input value for every onchange action and it works correctly for every input nice let's go back to C now when we store the form data inside the state we can try to send it using our API so to do it I Define an usn function with an event argument first of all I will cancel the default submit form event to prevent page reloading using the event. prevent default method and let's make this function a submit Handler for our form okay by the way I would also like to make first name and email Fields required here to implement a very small form validation so I just pass an AS risk symbol to placeholders and after that I should check on every form submit first name or email value and if one of them is empty just return from the call basically the form validation is a very important part and must be strict in most cases so I recommend you add more validation rules here but I skip this part to keep my tutorial simple next we can write our email sending request using fetch it is a good practice to wrap a requesting the try cat block so I start exactly with it in the catch block I catch an error argument to process it later now let's declare a response constant where we can write the result of our fetch request we should specify the pass of our endpoint that we built before I need to pick the request method inside so it will be the post method here and we need to provide the data to a body and wrap it to the json. stringy method let's go back to our API file and pass a request argument inside this is how we can extract form data from the request body here now we can read every form field value from the body object as a key and provide it to our email template or you can use object destructure instead okay I also add a fallback in case the field value is empty and just do it for every field in this example I just want to get a messages from my website form directly to my email so I just need to replace the two prop value with my email good now it's time to make the first sending attempt just complete our form with fake data and hit the submit button we can see on the network tab that the request was completed successfully and we got an email transaction ID inside the response object now I can open my email tab and see that the email is here great moreover you can find your email transaction in the recent account now I'd like to improve the user experience of our interf interace I just want to notify the user of the status of the email sent for this I'm going to use a simple react toy Library install it with the following command import all necessary components and Styles now we can get back to our handle submit function and clear the form data after that I'd like to extract the transaction ID from the recent API response and show it inside our notification message so if I have response data I should call that C success method and put a message text about a successful sending to it with the transaction ID in the error case I just want to show an error notification with a Waring message inside to make notifications work we should also add toast container to our page good now is the time for the final test fill out the data hit the sub button and there we go our notification works perfectly I have also noted that I forgot to write some CSS rules for the text area element so let's go back to the Styles and that's the mean High property and cancel their ability to resize it okay the last setion here is to disable a submit button while the email is sending to prevent multiple clicks to do it I Define one more State here and call it is fing with the default value being false I will change it to True before invoking our API request and returning to the false at the end of the function now I can use this flag as a disable prop for our submit button let's check how it works you can see that the submit button was disabled for a couple of seconds and the email send info is still working great subscribe if you like my content

Channel: from Dev To Prod

Views: 396

Keywords: nextjs, next js email send, next js 14, next js email verification, next js tutorial, next js email client, resend email next js, resend, resend next js, nextjs 13 email, send form data to email using react, send form data to email, send form data using javascript, next js send email, next js 14 send email, next js api send email, next js api routes, next js api call example

Id: SR_1GwJcogs

Length: 13min 57sec (837 seconds)

Published: Mon Feb 26 2024