How to Send Emails in Next.js Using Nodemailer and SMTP | Next.js 14 App Router Email Client

in this video we are going to send emails from nextjs application what I have is a new nextjs project on the homepage I've removed what was there and added a button when this button is clicked this function is called and then email should be sent these other things are not really needed we're focusing on sending emails so the UI should not really matter the use client here is because when you are making use of something like this use State this is no longer a server component I want the implementation for sending emails to be on the server side so what I'm going to do is to have an API route that I can call from this function and the email should be sent let me start by using fesh API to we're going to add the API route in a moment let's call it emails and then this is going to be a post request post then the response which we can transform to Json response. Json and then if any data is returned from that API call I want to set result with that data and if there's an error let's catch that error let me also set result to the error set result error finally I want to set loading to false but initially let's set loading to be true so down here I'm just displaying whatever that we have inside the result and when it is loading showing this text now let's go ahead ahead and create this API file I will go to SRC / app and add the folder accordingly this is just nextg stuff then inside I'm going to add route. ts5 before we write the code here let me have a utility function for sending emails so that we can call it in this route Handler I'll go to SRC let me add a folder called utils and inside this utils let me add a file call this m.s. can name it anyhow you want to send emails we are going to make use of a package node mailer so let me go ahead and install node mailer npm instore node mailer which is a popular package then here I'm going to import node mailer from node mail uh because we are using typescript let me also add in the types so this is going to be a Dev dependency going to run npm install save Dev types node mailer and the error should go away next let's create what is called transport transport will be equal to node mailer create transport and we pass the options I'm going to pass Host this credentials for our email is going to be stored in aemv file so I'm going to say process. EMV do let's call this one mail host I will copy and paste for the other options the next one is going to be Port which we can say May Port the next is whether this should use TLS for my local environment let me disable it let me set to false or let me say if should be true if not in development environment you can set your own value to true and then we have out so so this is going to take the user user process. EMV do SML user and password process. EMV do Ma asword I'm getting some typescript related error here so to make that go away I'm going to say the this is as SMTP SMTP transport dot options now let's go ahead and Export a function for sending the email so let's call this export con send email this function will take a parameter about the message we want to send let me Define a type here say type send email uh D whatever come on here we're going to have sender that is the email that we send out this email let's have a type imported from node mailer the type is address and we are going to let's call this one recipient and this is going to be the same type but you can send to multiple recipients at the same time so let me use an array there and then subject for of the email this is going to be a string and uh the message body this is also going to be a string which can be HTML um string then over here I'm going to pass that send email D to and grab those fields from D oh not like that so we have sender recipient subject and message now we can make use of the transport object we created above to send email I'm going to return a wait transport do send email this takes similar options like uh what we have in the D to use a weight this function has to be declared as snc so let's have from which is the same as the sender sender and two this is going to be the recipient one or multiple and HTML this is going to be the message and you can add text this is going to be a plain text version of the HTML message but for this demonstration I'm not going to bother let me just pass the same thing here finally we have the subject now go ahead and create the environment variable file to put these guys there because I'm going to store some Secrets what I'm going to create is EMV local which should not be committed to your uh Git Version Control whatever and then I'm going to have the mail host M uh port and mail what was that let me copy from here user and password M user mail password the values you enter here are up to you depends on the email service you are using you're using Google or you're using um Zoho whatever for the purpose of this demonstration I'm going to make use of a free email service the mail trap so here I'm going to grab my SMTP credentials and put in a EMV this is the host whatever service you're using is going to provide you similar credentials so I'll go over here and put the host and the port and uh I think should be 465 when using secure I don't know but let's try that and the username finally the password all right now we go to the route the route Handler and just call this function so over here in the route Handler I will export a sync function on this is going to be a post um route and then let's get the argument we are going to pass to the function send email let's have sender uh this is going to be of type mail address if we check what is inside here we just have the name of the the person that owns the email and the address so I'll go over here and have name of the sender let's say the name is my app and address whatever no reply at example.com for recipient we do something similar but an array so recipient to be equal to array of mail address going to have name let's say say we are sending to John do and address to be john. do at example.com you can add more recipients if you think is okay to send to more than one person at a time and then we have const or let me put a trash here because I didn't put in the in the function con result to be equal to await send email and this is expecting sender recipient the subject um let's say Welcome to our website and the message and send whatever you want to send um let's say you are welcome okay now when the result when I get the result I just want to return that response to the client return response. Json let me okay let me return this actually I don't know what this is sending to the client so to be honest sa side let me see let me see what is inside here dot accepted reject I'll just send accepted there accepted to be respond do accepted but if there's an error I will just return nothing and send a message so I'll just send a message say unable to send email this time actually that's not the syntax they should come here and let me put a status code here of 500 unable to send email this time try again later okay we have a route Handler ready the function for sending email and the page let's give this a try and see what happens I will head over to the terminal and run this application npm run Dev on the browser I will visit Local Host 3,000 where we should have our button so let me click on this button says processing tryes to send email and it was successful if I go back now to this email inbox this test inbox you can see that we got the message Welcome to our website and the sender is my app no reply example.com and the recipient is jond do so sending email works if you want to learn more about the different options like sending to CC and Etc you can go to node mailer documentation to see what you can configure so this is a basic example of how you can send email from nextjs application I hope it makes sense until next time enjoy coding

Channel: ZestMade

Views: 1,152

Keywords: Nodemailer, SMTP, Send email, Nextjs, Next.js, Email client, Nodejs, React.js

Id: Ir7HJYBKMuM

Length: 14min 9sec (849 seconds)

Published: Thu Apr 18 2024