How to Send Emails In Next.JS 14 With Dynamic Templates

how we can send beautiful emails in Nexus version 14 this is sakur Channel and in this video first I'm going to set up a SMTP server with our Google account and then I'm going to teach you how we can send emails in nextjs and also I'm going to show you how we can create Dynamic HTML templates in the body of our emails and by Dynamic HTML template I mean we can interplate our custom data in the HTML template when we want to send emails so without more talking let's Dive In okay first we need to go to our Gmail account and then I'm going to go to the security section here and then here make sure that you have enable the twostep verification so after enabling that I'm going to click on it and here I'm going to put my password okay and then scroll down here to app passwords then click on it here I'm going to choose a name for it for example I'm going to say Sakura Dev test email okay and then I'm to click on the create and here it generate a app password for me so make sure to copy that because after you click on down here you won't be able to access to this generated app password so I copy that and then I open up my Nexus version 14 app project and here I'm going to create a EnV file okay and then inside it we need to create two variables here the first one is SM SMTP password okay and then set it to the generated password that we've got from our Google account and then put my degenerated password here and then I'm going to create second variable here which is going to be as MTP email okay and then set it to my email accounts okay so let's save this and later in this video you will see how we can use these two variables so now we can install the node mailer package which is a library for sending emails in nodejs application so I'm going to use bond for installing that you can use npm install instead so here I'm going to say Bon at node mailer okay so as you can see it is installed really fast in just 8 millisecond and that is the beauty of the bond okay so let's clear this up and since we are using typescript we need to install the types of the node mailer so here I'm going to say BN add add types SL node mailer okay and let's close the terminal and let's go to the lib directory here and create a file called mail. TS so in this file we are actually creating the functions that are related to emails so in the first one we're going to Define and Export a function which is responsible for sending email so I'm going to say export async function and let's call it send mail okay so here let's define the parameters this function is going to take an object as its parameters and let's define a type for this object it is going to have a two which is actually the email address of the recipient so let's set its type to string and then it is going to have have a name which is going to string it is actually the name of the recipient and then it is going to have a subject okay let's set its type to string and in the last one we're going to define a bud which is actually the body of the email and let's set its type to string okay and now we can put a pair of C braces for the body of this function okay so let's save this and now we can D structure the parameter object let's take two name subject here and also the body okay and now we can start defining the body of the sand mail function first we need to get the SMTP email and SMTP password from the EnV file so here I'm going to say const and object SMTP email and let's actually go to the EnV file and copy the SMTP password okay get back to our mail. TS file put it here and then set the object to process the EnV okay okay so in this way we are actually getting these two EnV variables from our EnV file and in the next step we need to define a node mailer transport so here I'm going to say const transport okay and then set it to node mailer so to do that we actually need to import the node mailer first so I'm going to go here and say import node mailer from node mailer okay now we can use the node mailer here so we're going to say node mailer do create trans okay and then we're going to pass an object here we're going to define the service we're going to set the service to Gmail and then we're going to have a off object here which is going to have a user and we're going to set it to SM SMTP email variable that we've got from the process. EnV okay and then we're going to have a pass here and we're going to set it to SMTP passport EnV value okay so here let's actually test our transport so here I'm going to put a try catch block here okay and then here I'm going to say const test result okay and then set it to transport. verify and then we're going to set it to A8 and then transport that verify okay and let's lck the test result and now we can put a catch block here okay which is going to have an error and now we can lck the error in case of any error happening so in this way we are actually testing our transport which is created by the nod mailer do creat transport and then after that we actually send our email so here I'm going to put another TR catch block and here I'm going to say con send result and I'm going to set it to await transport. sendmail and we need to pass an object here okay the first one it is going to be from which is the email address of the sender which is actually is the SMTP email which we are getting from the EnV variable and then we're going to put the two here which we are getting it from the object parameter and then let's put the subject and as a last item let's set the HTML to the body parameter okay so after that we can log the send results and let's put a catch block here get the error and in case of any errors here we can log the error okay so we're done with the send email function we are getting the SMTP email and SMTP password from the EnV file and then we're going to create a transport with node mailer and then we're going to test it to see if it can reach the SMTP server and if that's okay we can log the test result and in case of any error we can just lck the error and let's put a return keyword here to end the function in case of any error happening and then we're going to try to send the email with the transport. sendmail function so that's it for the sand mail function so now we are going to to test this sand mail function okay so let's save this and let's go to the page. TSX our homepage our next application and here as you can see we have a form here and a button so in the button let's define the form action and let's set it to for example send function so now let's define this send function here so I'm going to say const sound and set it to an async function okay and let's mark it with the U server because it is going to be a server action and here let's just call the send mail function from the mail. ts5 okay so I say wait send mail and let's put the parameter object here let's define the two which I'm going to set it to Sakura Dev [e-mail] and let's define the name which is going to be my name and set the subject here going to set it to test mail and also let's specify the body okay so let's put the body here we can use HTML tags here in the body for example let's set a H1 and inside it for example let's say hello world okay so now let's run our application let's say Bond diff or you can use npm BR diff let's open it up in our browser okay so we have the test button here so let's click on the test and now let's get back to the vs code and here as you can see we have an error here so let's get back to the mail DTS and double check our code so here we verify the transport with the provider data here we have the service oh yeah we have misspelled the Gmail so let's correct the spelling of the Gmail and let's save this and get back to our browser and now if I click on the test it should work so I go back to our project and scroll down the terminal and as you can see we have the true here which is the returning value of the verify function of the transport and this is the returning object of the transport. sendmail so now let's get back to my browser and now let's go to my Gmail account so as you can see we have a test mail here and if I open it you can see the hello word inside it so you can see the sender is Sakura dev23 which is my email address and the recipient is also my email address that's because we are setting the both sender and receiver to the same email address and you can see it is working without any error so in this way we can send an email in our next year's application but this is not the end of this tutorial now we are going to send and customize a HTML body with our email so in this section of this video we are actually send in an email that has a HTML template inside it so as you can see we have the name of the user here and also here and also we have a subscribe button and if I click on that it is headed to my YouTube channel so in this section of this video I'm going to show you how you can create and customize an HTML in the body of your email and also interplate your custom data in that HTML template so let's get right into it in order to create this HTML file first we need to create a HTML template in order to do that we can go to B free.io okay I'm going to sign in with my Google account and you can create a organization here and if I click on that you can see it headed to my project and for now let's create a new one let's create a new email here and you can see a bunch of template here and now let's choose a template here I want to go with this one and click on start designing okay and here you can design your HTML so here for example let's put a title here okay and put it here and let's say Hi and then in order to put something like a variable we can add a name inside two pairs of curly braces so here we can set a name here so the name inside these two pairs of the col braces would be actually a variable that we can set the value to that as we will see later in this video and then let's add a button here so I go to the content and let's put a button here and let's change it to for example subscribe okay and here we can change the URL here so again we're going to put a variable put two pair of C braces so let's make it a little bigger so I put two pairs of cod braces here then inside it for example I can put a URL variable okay so in this way you can change and create your HTML template in the way you want and put your kind of variables inside that HTML template so here I'm going to click on the exit here okay and then I'm going to click on my name here and go to the project and now let's click on the three dots here and click on the export I'm going to click on the copy the HTML because we actually need the HTML code of this template and then I get back to my project here so let's close the terminal and inside the lip directory I'm going to create another directory called template and then inside it we're going to create a typescript file for example welcome. TS so here we just need to export a string variable so I'm export con welcome template and then set it to a back text here and inside it we're going to paste HTML template okay so we just need to save this we don't need to do anything in this file so if I for example search in this file let's search for the name our name variable you can see it is inside our HTML code and we can also have our URL okay can see here the URL is set to the HF of our subscribe link so in order to use this template and put our actual data in the name and your variable in this template we need to use a tool called handlebars so I'm going to open up my terminal and let's create a new one here so here I'm going to say bun at handlebars it is installed but you might ask what is the handlebars so with handlebars we can compile a HTML template and interplate our variable into it with this tool actually we are going to send a value to the name and URL variables that we have created in our HTML template so now let's see how we can do that okay so I close this off and I go to the mail. TS file and here after the S mail function let's create another function so I'm going to say export async function and then name it compile welcome template okay it is going to have two arguments the first one it is name which is going to string and this second is URL which is also his type of string okay so let's define the body of this compile welcome template okay so in this function we're going to use handlebars to compile our welcome template first we need to import the handlebars so I'm going to say import everything as handlebars from handlebar okay so I get back to the compile welcome template function and here in the first step we need to create a template so I'm going to say const temp template and set it to handlebars. compile function and now we just put the welcome template that we have created in the welcome. TS file welcome template so let's get back to the compile welcome template function and then here in the handlebars. compile function we put the welcome template that comes from the templates. welcome. ts5 okay so we have created our template from the welcome template and now we can pass the value of our variables to this template so I'm going to say const HTML bu and set it to template and then pass an object here to the template and here we can set the value of our variables we have the name which is going to be this name parameter so I put name to name and we have the URL variable in our template and we're going to set it to URL okay so in this way we can create a HDML code with this template and initialize the variables inside that template so now we can just return the HTML body from this file okay so I go back to the page. TSX here and here when we are calling the S mail function we're going to set the Buddy to the compile welcome template and then pass the name which is going to be for example my name and we're going to set the URL which is going to be URL on my YouTube channel Sakura dep and then in order to get rid of this error here because it's a acing function we can put a weit but actually we can remove this asyn keyboard here from this function because we don't need it to be an async function so I get back to my page. TS6 as you can see the error is gone okay so now let's get back to our browser and here I click on the test here and get back to the vs code open up the browser you can see it sends the email without any error so let's let's get back to my inbox in the Gmail let's refresh as you can and if I click on the Subscribe button here you can see I'm headed to my YouTube channel so in this way with handlebars we can compile a template and interplate the value of our variables into a HTML template so yeah that's it for this tutorial and if you have found any value in this video please hit the like button and subscribe to my channel have a nice time bye-bye

Channel: Sakura Dev

Views: 3,600

Keywords: how to send emails in node js, how to send email in next.js, nextjs, nextjs14, next js 14, nodemailer, handlebars, how to send email in nextjs, how to send email in next js 14, how to send email in nextjs 14

Id: 81lt0qcXtHE

Length: 16min 57sec (1017 seconds)

Published: Fri Nov 10 2023