Mastering Email Sending with Nodemailer in Next.js | Complete Tutorial

hi everyone um welcome to problem solving with JavaScript today I want to show you how to send emails using node mailer and next year's API route it's going to be fun because we're going to use this form right here to actually you know as the form data we're going to be using to send the emails we're going to be extracting the the subject and the contents of the email to send to an email address uh one thing we're going to be using is zoho's application Level uh security credentials which I already have and already created so that's something you could do on your own if you need any help you could put it in the comment section or connect with me on on Twitter underscore challenge Seeker where I'm gonna probably do a walkthrough video on how to create your own credentials it could also be on other platforms it doesn't have Zoho what that basically means is that the username and the password especially the password wouldn't be the main password you used to log into your email account it's going to be for this specific properties so while that has been said undone uh we're gonna get started right away um see you on PS code welcome back let's talk look at uh you know what we have here like I said earlier we already have the form created nothing has been attached no new state has been attached on the form so it's gonna be uh the focus is gonna be right in the code for the API itself the request itself and uh I I've already created like a folder API and a subfolder send email which is going to be like a route and I have the router.js which makes JS is going to help us you know manage the routing for the API so I'm going to come over here and do like um export you know a sync function and posts so you know next API is going to know that this is the post request um so the first thing I want to do is I want to collect details which is I could call it subjects and message you know of the the form which is uh request.json which is going to give us a request.json the next thing I want to do is create a transport uh so I'm going to create a transporter which you know is a node mailer a node mailer I'm just I'm just gonna initialize note Miller up here because you have to install nude Miller you have to install nutmeg and nope Miller it has to be note mirror I'm not going to do the structured Imports that's not what we're looking for uh so that's good so I'm gonna do a note mailer dot you know create transport which is basically collecting an object uh the object will require service like I said in my case I'm going to use the Zoho service it's also going to require a host I'm gonna call it SMTP Pro dot so dot in it's going to require reports and the ports would be four six five it's going to also require of course we have to put this secure which is true then this is where things get interesting you know we have to call the odd uh this is where I'm saying that you need to have your own credentials so my user is going to be career OS at you know trypophobra.com which is the email for uh the Korea OS platform and then the password is gonna be I'm gonna go take it from my environment process so next public password should be a bit Rebels than that if you want but that's pretty much what I'm gonna do so we've created our transporter and we're able to import our data from you know from the request which helps us you know know what we're doing the next thing we want to do is basically create like our mail option which is kind of like the contents of our email so we're going to create a mail option which you know it's gonna have like the data of the email basically from you know it's going to be from career OS trip Opera it's gonna be two ah Augustine repos at gmail.com just for now it doesn't really matter the subject will be um send email tutorial that makes sense yeah then you know there are different ways to do it if you're if you're important from you know a HTML template like a handlebarge then you would you would have created a different method uh different structure to import The Handlebar and you know read from there but since I'm not going to do any of that I'm just gonna write simple HTML and you know the HTML is going to have kind of like you know this guy you need Sim so you know there's the page three it's gonna be H3 it's really gonna be stressful so I'm just gonna write the simplest H3 hello um Augustine yeah I'm gonna do it that way hello I've seen then I'm gonna say something as easy as title would be equal to the dollar sign and you know close this guy it's you it's gonna be the dollar sign subject then we're gonna do the same thing but I'm gonna call it message and it's gonna be the dollar sign message so once we've been able to create like a trans the the options there the next thing we're gonna do is you know you know call the the function so we're going to call the transporter function on the uh send mail we're gonna call the transporter of Journal option in there fantastic so once you've done that we need to send to the person who requested for our uh we're gonna return the next response which kind of like tells the request the person who request the API that hey you know the work is done you know so we're gonna say message uh emails sent successfully and you know we're gonna we're gonna say you know we're gonna give it a status of 200 as well you know just to be sure but there's one thing I want to do for extra kind of like error handling I'm gonna do something like this I'm gonna do the try catch I'm gonna call it try catch you know method so we have something even much more sufficient so I'm gonna return I'm gonna kind of like return next response where the message says failed to send email you know just to make it look depressing I'm fine so we're gonna give it a status of 500 I'm not going to record it properly I'm just gonna give it a status of 500 just for the sake of uh you know let the hackers not know what the problem is you know so 500 just gonna give it a state of 500 so I think this works so we we could go back to our page and you know create new States for both some I'm going to create new States for boats the subjects and you know I'm gonna create new States for the the message yep I'm gonna try to import that as well then I'm gonna you know write the function send mail which is kind of like the simple like this on our function send mail and you know I'm gonna give it an e so if I could do something like e that's different default so it doesn't refresh the page so I'm gonna attach all of that let me put it here or we're gonna put the on submit sent mail and then we're gonna have to come down here and stay um on change would be subjects uh non-change value with this subject on change B and R function that says that subject to be we're gonna call E there as well e dot Target the value we could we could use kind of like uh an email object like form data but I don't want to really go into all of that right now so we could do the same thing here at same value equals to message and then calling you know the unchanged and say a you know sex message either Target dot value so we've been able to have all that so okay and this will be type submits just to make everything work kind of look even much more responsible so it's gonna be submit uh now we've had all that the the next thing we're pretty much gonna do is call the constant response equals oh wait this is going to be a nothing function so it's going to be a weak batch that we're just going to call the routes and say send email we're gonna call the route and send email and say if I I could just you know cancel cancel that log I'm just going to do a simplest form of console.log a weight response.json this one I'm not going to do all the zip responses okay because that's really pretty much irrelevant so we're just gonna test run this with the with the console and okay we're gonna test this with the console and see how it looks and we've been able to send an email right I'm not going to show you my email address showing you there but so we're going to use the console to read the message either the error message or the good news message that email has been sent so let's get going let's go see what we have on Chrome browser and you know have fun with it let's go check it out so let's get started uh this is everything so we're gonna say send email tutorial as the head and I'm gonna say it didn't work as the body and I'm gonna just click Send and see what we have unexpected and 405 method not allowed yes I think the reason for that is pretty much simple because the way we called our batch was called not as a post request so we have to fix that so let's go back to vs code all right so let's fix that pretty quickly so I'm gonna put you know I'm gonna add this part and say method it's going to be a post you know and I'm gonna say um buddy I guess it's gonna be subjects and message which pretty much tracks with what we have here subject and message yeah so I'm gonna just do the whole Json dot stringify thing and yeah we're gonna do that so we have that you know as well so I think this should solve our problem because we we're calling the post request so this should solve our problem uh there's no need for headers and I'll you know pretty pretty cool stuff uh after that enough to actually do something like content okay just start there there's really no need for this part I'm just doing that to flex some empty muscles so uh we're gonna go back to testing it and see how that looks like so let's try that again uh and see how that works send email tutorial did it work so let's see if that works it's loading the delays if you think fantastic so you can see it right there that email sent successfully so that's pretty much it uh you could go as far as clearing the form when you know you've gotten your your message it's sent successfully you could do all this you know fancy good stuff but this is pretty much you know what we have you know message sent successfully um it's actually the kind of message we're looking to get in return so this is how you send email using node mailer next year's API I hope this helps you in your next project or the next thing you're trying to build that requires in app you know email whatever so uh go out there use this knowledge for the iron Boot and I could alone talk to you later bye thank you

Channel: Learn with Augustine

Views: 8,666

Keywords: Next.js, TailwindCSS, Email

Id: -qQjyxbla-k

Length: 14min 9sec (849 seconds)

Published: Mon Aug 07 2023