How to Send Emails with Next JS and Nodemailer

[@kby9001]

Dude you're such a lifesaver. I was making this way too complicated trying to use the Gmail API and Express and knew there had to be an easier way with using Next. Thank you!

[@kby9001]

I wanted to ask, in my application I'm wanting to take the users email that they input and send the mail directly to them instead of myself. How would i pass that value from the form into mailOptions?

[@nikita-dev]

you can remove the "to" prop from the mailOptions and just set it in the sendMail() call in the handler. In that case, you would be setting the "to" property on the fly, on every request, with whatever the user passed to you in the body. If you take this approach, I would add stronger email validation (using a validation library) to ensure that the user sent a valid email before calling sendMail()

[@anasazkoul4899]

@@nikita-dev I came across your video wanting to learn about nodemailer and I ended up learning alot more, I'm using zod in my handler to validate emails would think this is a good way to validate the email? looking forward for more videos about nextjs, thank you so much

[@nikita-dev]

No problem! And yes, Zod should be sufficient for email validation

[@Abhinav_5383]

Bro, JUST the same thing I was trying to do. I spent 4 hours and got just frustrated and dropped the idea.

[@СергейМурин-д6ч]

after 5 hours of trying different options, i finally found the best one

[@PrayingLotus]

Thank you so much for this. Was bashing my head against a wall trying to figure out how to send an email without using a paid service. What I'm wondering now is how, whoever submitted the form, they get a confirmation email as well.

[@nikita-dev]

you can call the sendMail method again, but just override the "to" property with the user's email that they input. For example: await transporter.sendMail({ ...mailOptions, ...generateEmailContent(data), subject: data.subject, to: RECIPIENT_EMAIL }); (replace RECIPIENT_EMAIL with the data that was passed from the user)

[@keyonlewis7574]

it was fun making this work on next.js 13, lot of new things i learn within 2 hour it take for me to finish it. thanks bro

[@Sport-word]

Hello keyonlevis. i have been trying to make it work on nextjs 13. However, i have not been able to get it right. Please kindly help me with your code. I will deeply appreciate you. Thanks

[@defdev007]

I've been trying to integrate this feature ever since, but I couldn't find anything that worked for me. Thanks a lot for sharing

[@Phas0ruk]

One issue I had was that my windows firewall was blocking outgoing connections on port 465 which is what gmail uses. When running my app locally, when I temporarily disable the firewall, it works.

[@stephanvandermeijden767]

Thank you, I ran into issue with Express and whatnot and it just got too complicated. This makes way more sense. Great explaination too!

[@nikita-dev]

thank you, I'm glad it was helpful!

[@zee_designs]

Hey Nikita, you guided me in the right way, I was struggling with this topic, Thank you

[@Jediknightcode]

Great tutorial, thanks for posting this. There is a lot of ends and outs to this process and this video helped give a great guide to getting me toward the track I need!

[@nikita-dev]

I’m glad it was helpful!

[@m.efremova4649]

This is exactly what I've been looking for! ❤

[@NiteshKumar-l8t7m]

feedback: if you add required thing when user submit and field is empty. This will make much more easier.

[@maxskewes]

Thank you, any possibility of a follow up to this video, migrating to the Nextjs 13 App directory? I am having an absolutely impossible time trying to implement the teachings of this video to their new system of API usage. Much, much appreciated.

[@Phas0ruk]

Superb content. Clear and slick. Keep it up!

[@juanrios3066]

Perfectly explained and definetely a huge help on my learning journey as a developer, Thank You!!

[@Riexn]

An elegant solution, and well explained. Thanks!

[@uminhtetoo]

Thank you so much for sharing your experience, Sir.

[@ssdasasdasdasdsd]

Awesome video, my guy. You the man!!!! Keep em coming

[@setoseng]

Great explanation! Straight to the point.

[@kray85]

Awesome tutorial!! Well explained and you saved me hours for implementing a email handler!!

[@noone-dx6tr]

Hey, thanks for the video! Could you also make a tutorial on how to additionally send an attachment via this form and nodemailer?

[@noone-dx6tr]

Please let me know what you think, I Have looked up on the internet and could not find much help, there are also not answered questions about it on stack overflow, so this video could help a lot of people

[@nikita-dev]

I will definitely consider it!

[@noone-dx6tr]

Thank you!

[@xlgablx]

@@nikita-dev :(

[@Jesus-xp6cf]

Thanks for the help!! Amazing tutorial.😁

[@INVICTUSasw]

THIS TUTORIAL WAS HELPFUL !!

[@minipark6972]

Wow, Thank you so much!

[@bespokeprogramming]

You are a legend. Thank you!

[@gogaimerlishvili4542]

Bravo!

[@tonycreavin]

Great tutorial. One question though. I would like to send the automated confirmation email to the client, rather than to myself. How do you adjust the mailOptions function to allow this? Thanks in advance

[@nikita-dev]

You would have to overwrite the "to" property in the mailOptions object. You will have to do that dynamically on each request. For example: await transporter.sendMail({ ...mailOptions, ...generateEmailContent(data), subject: data.subject, to: RECIPIENT_EMAIL }); (replace RECIPIENT_EMAIL with the data that was passed from the user)

[@oghenevwefepeace2501]

Nice video, It worked perfectly, Thank You

[@manishchaurasia447]

Dude you're great. This helped me a lot❤❤❤❤

[@techlightdev]

Thank you for create amazing clearly tutorial. So helpful for me.

[@jakubkurdziel2407]

Great!

[@SergioSanchez-rh4po]

Super helpful, thank you very much. Keep up the good work!

[@nikita-dev]

thank you!

[@almakay01]

Also thanks for posting repo it annoys me when people dont do so lol

[@Igor-uz3vn]

Greate tutorial! How did you solve the problem of sending a message from Vercel hosting?

[@nikita-dev]

You just have to make sure your environment variables are set up correctly. If you change them at all, make sure to rebuild the environment so it can pull in the updated values

[@evanmarshall9498]

I followed this video verbatim and it works flawlessly. Well, I adapted it a bit to use TailwindCSS for the contact form but still works great... locally. When I push to my production deployment on Vercel and test it live, it does not work. I added the environment variables (EMAIL & EMAIL_PASS) to Vercel settings thinking that was the issue, but still no fix. Can anybody help me with this? Does anybody have similar issues? EDIT: Needed to perform a new deployment after adding Envrionment Variables to Vercel in order to update the site with the variables. Ran a test and it works!! Thank you!

[@pedro.sh101]

hi Evan, could you explain a little better how you made it work? having the same issue here, but on netlify

[@evanmarshall9498]

@@pedro.sh101 I was only updating locally so in order to update in production I needed to push a new deployment to vercel in order for the environment variable to take place.

[@gubmx20]

I had to do the same thing!

[@score_]

everything works perfectly fine, just a question, is this api/contact public for everyone when we host it? Is there a risk of this data being leaked?

[@TheRiteHand]

Awesome tutorial. Question: how do we supply env variables in production? Thanks in advance for any help!!

[@nikita-dev]

It depends on where you deploy (Netlify, Vercel). There is usually a tab in your configuration settings called "Environment Variables". You should be able to find detailed steps by looking through the docs of the cloud company you are using (to deploy).

[@sagar5547]

thank you so much bro lots of love . it helped me in my porject. 🥰

[@CodeInDraw]

Thank you so much. Its really helpful

[@andersbraathen1256]

Great video, thanks!

[@ManuelGuillenSerna]

Thank you so much for the video, it really helped make my contact form. The only issue that i have is that, even though i have my type="email" on the email input, i can write whatever (without an @) and the email is still sent. It isn't a big problem but i would really appreciate if you could help me with this. Thank you!

[@sudam-d]

Appreciate this so much

[@KubaSobecki]

Very helpful. Subbed. Thank you.

[@iamcherrycloud]

Thank you so much, your video helped me a lot

[@neutrallane]

Its not working on my end... i followed everything

[@nikita-dev]

what part specifically is not working?

[@vito7198]

Thanks!

[@ahmedhassaballa9909]

Thanks for your great explanation, i would like to ask can i adapt this approach in my project for sending email notification within my workplace for workflow tasks such as approval email notifications when a new request has created by employees ? regards

[@nikita-dev]

Yes, you can reuse the same nodemailer client to send emails for various different actions that you want to handle in your app. The only thing that would change is the email content

[@Abhinav_5383]

Just Awesome

[@박공부-m5h]

멋진 튜토리얼 입니다.

[@aliazeem92]

Thanks bro, you helped very well

[@cacodelphia_]

awesome man, thank you

[@scoria4988]

Hi Onelight! I like your solution since I was trying to get a functionality like this using services like sendgrid but all of these require you to have a private email domain which I can't affort right now. But I do have a question, I implemented your solution almost identically to yours with almost the same validations: isn't it kind of a vulnerability that an user can spam the send button or creating a script to completely flood your inbox? If that's the case, what can I do to prevent that from happening?

[@c4pancake]

If using newer versions of Next.js, would you just add "use client" to the top? Or would you do this a different way?

[@johnmichaelcanero2210]

Thank you! It worked but HOW do you set up where the sender displays their name in the email and not the "Me" Email?

[@wild3dcgi969]

thx u a lot man for such awesome tutorial

[@SF-tv2so]

Thank u so much. Ur video has helped me

[@Califv]

thanks!

[@subei7418]

Why is nodemailer not sending the email when deploying on Vercel?

[@nikita-dev]

it is likely an issue with your environment variables

[@oketunbiolufunke1142]

⁠@@nikita-devalso facing same issue and it’s not the Environment variables When I deploy to vercel I get an error and the whole application crashes

[@princefresh7588]

@@oketunbiolufunke1142 does this video works ? on local host ?

[@clarkwayne2102]

Thank you so much!

[@srinivasnahak3473]

Thank you so muchhh!!

[@AbdullahShahid-n5g]

is it a only front end based email sender mean do you need express or backend to able to run it or is it purely frontend based

[@nikita-dev]

The email is getting sent from the server (NextJS API function), not the frontend. So you don’t need express

[@SubwaySounds]

Awesome thanks.

[@SubhadipBisai]

if I want to change "from" and "to" for differnet mail then this EMAIL_PASS pin is needed for both mail ?? how can i do that?

[@nikita-dev]

you will only need to change the EMAIL_PASS variable for the sender's email (the "from" email). Yo don't need a password for the "to" email

[@jackpaterson5324]

it works👍

[@danielChibuogwu]

I really appreciate it

[@jayeshsingh28]

Chakraui updated docs disabled for button is now isDisabled hope it helps✌🏻🔥

[@gojamoja6719]

thanks man

[@naveenv8417]

i have deployed my portfolio in vercel which had this nodemailer in localhost it is working perfectly but after deployment is showing error with 500 code

[@zaqwer9595]

Have you entered auth data (the one from .env.local file) to Vercel's environment variables in project settings?

[@user-nn8ui8rx7j]

Could you make a version of this video that does not rely upon chakara?

[@mydaily21]

about template. is possible if import template email.html to api? not copy all code from template. i mean just import it

[@MohammadbasitYousofi-ih5iv]

Hey! Error: fs not found from node_modules folder of node mailer tell me the sulotion

[@muhammedshibil5409]

Hi, how to solve Error.can you share

[@kikonunez290]

Thank you for the tutorial! I got everything working until the very end. The contact form works on my localhost but not on my deployment link with Vercel. I keep getting "Failed to send message" using my deployment link. Any idea why?

[@kikonunez290]

using the chrome dev tools, there is a network error saying ""Missing credentials for \"PLAIN\""

[@nikita-dev]

It is likely an issue with your environment variables. Can you verify that they are set properly and you’re able to access them from the Vercel app? (Create a test endpoint that returns some of the non-sensitive env variables like the email and ensure that you get back the right value)

[@kikonunez290]

@@nikita-dev Thank you so much, that did the trick! I needed to add my env variables to my vercel app.

[@atsglobalservices6136]

Great video

[@amitodak]

hi, do you tutorial or other resources that have for file upload in pdf format? thank you

[@Sport-word]

This is not working on nextjs 13. latest version. Please help

[@MdNaimurRahmanHera]

Awesome

[@Lyzeuph]

Thank you!!!!

[@appstuff6565]

Hey Nikita thanks for this. Im using Nextjs and supabase and im now requiring to use a smtp, for sending sign up and reset emails only, so what do you think is the best way to do about this? Nodemailer + Amazon SES? or can I just use nodemailer alone

[@nikita-dev]

Honestly I would recommend just using AWS SES or Resend

[@appstuff6565]

@@nikita-dev thanks nikita.

[@RaulGlasgow]

good job!

[@yuvalbra]

how can i add attachment file? and where i need to put the file if i want to send it ?

[@jankarlodeiparine5360]

I hope I get a reply from this. I can't seem to accomplish it via using Outlook, it sends me error code 535 5.7.139 Authentication unsuccessful. I'm doing a blind approach on this configuration. Please I do need help on this matter.

[@nikita-dev]

Here is a helpful article on using Nodemailer with Outlook: ourcodeworld.com/articles/read/264/how-to-send-an-email-gmail-outlook-and-zoho-using-nodemailer-in-node-js

[@JBUDDTV]

is the spinning annimation part of Chakra-ui or embedded into nexjs?

[@nikita-dev]

it's part of Chakra UI

[@lorenprice7333]

Get tutorial! But I have an error on my end. It's saying: Cannot read properties of undefined (reading 'sendMail') at handler. How do I fix this?

[@nikita-dev]

it looks like your transporter object is not being imported correctly. Are you exporting from the config/nodemailer.js file?

[@lorenprice7333]

@@nikita-dev Thank you, I went back and copied exactly what you had and it finally worked. I must have had a typo somewhere. Thank you for responding!! Also, great tutorial not get! lol

[@lorenprice7333]

@@nikita-dev Would you be willing to give me advise on transferring this to an existing project. I'm now getting an error stating it cannot resolve 'nodemailer'. The error suggest trying a 'preferRelative' . How would I add this to the config/nodemailer file?

[@nikita-dev]

did you install the nodemailer package from NPM? (in your other project)

[@lipocodes2273]

Very good

[@sayakbasak587]

great

[@juanbecher6200]

Hey thanks for the video! I’m having some issues moving to production since the send email function is taking more than 10 sec to run which makes that vercel stop the execution due to limitations on the free plan. Do you think it could be a solution for this? Thanks in advance!

[@nikita-dev]

It shouldn't take more than 10sec to run... Im assuming there's an error in your API route. Are you able to check the server logs and see if there are any errors that are logged?

[@AdamBakerMTB]

@@nikita-dev It will be returning a 504 because if its hosted on vercel it could be doing a "cold start", causing the resource to time out?

[@AdamBakerMTB]

Did you find a solution to this?

[@juanbecher6200]

@@AdamBakerMTB not really. I ended up using sendgrid.

[@RahulSingh-on7ko]

hi i am facing issue with fetch the contact api . 400 bad request coming export const sendContactForm = async (data) => fetch('api/contact', { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json", Accept: "application/json" }, }).then((res) => { if (!res.ok) throw new Error("Failed to send message"); return res.json(); });

[@sdfsdfsdffdsfsdfsd123]

How can I fixed this? thanks

[@devpako1899]

Good job, but I need help if you can. I want to use this form to send email with attachment or embedded image. Nodemailer has an example for it but that example uses locally stored images which is not what I need. I need user to be able to upload picture and send it to email. Please give me some guidance.

[@nikita-dev]

You'll have to first store the image somewhere (S3, or whatever cloud provider you're using), then get the public URL to that image and use that to create an image in the email HTML. This logic can all be done in the handler

[@MaikeHerzog]

works local but not working on server "gateway timeout 504"

[@NoomanMILED]

Hi, thx a lot !, just not working in production. Mail received with "undefined" instead of req.body value

[@nikita-dev]

were you able to get it working locally?

[@formorri]

@@nikita-dev I'm having the same problem. It works locally but if I deploy to Amplify, it doesn't work. I've tried entering the env variables into Amplify but even then it gives me a 405 error.

[@daviddarfdas]

@@formorri Same issue here. Could this be gmail blocking the request?

[@arounaouattara6037]

Thanks

[@godzabomni4148]

Can you use this to send to outlook emails?

[@nikita-dev]

yup! you can find some examples online: ourcodeworld.com/articles/read/264/how-to-send-an-email-gmail-outlook-and-zoho-using-nodemailer-in-node-js

[@mikegyamfi983]

It sends message undefined undefined to my gmail..how do I fix this?

[@mikegyamfi983]

The stringData comes out as undefined

[@treyrader]

Is this possible to setup without using 2F auth? If so, do i just ommit the pass variable? Having some issues with getting it to work. Might have to rabbit hole for the night

[@nikita-dev]

honestly I would recommend using Resend instead of Nodemailer

[@treyrader]

@@nikita-dev isn't resend not free? I'll look into it for sure. thanks man

[@nikita-dev]

they have a pretty generous free tier

[@aniket1008]

@@nikita-dev Don't we need to add domain in order to send emails from any place. Would have to buy domains right?

[@geta70]

for me, it doesn't work and I don't know why. l receive the message " Failed to send message" also I receive the next Error: Missing credentials for "PLAIN"

[@nikita-dev]

This is likely an issue with your environment variables. Are you able to get it working locally by hard coding the values into your nodemailer instance?

[@wolfie8748]

but this is basically me messaging me ? when I check who sent the email it is the user we entered so how can random people mail me for my portfolio website?

[@nikita-dev]

You’ll have to rely on the email sent in the form field to know who submitted the contact form. Sure the user can pass a fake or invalid email in that field, but if they really want you to get back to them, it will be a valid email. If you want the email to come from the user who is actually contacting you, you should use an HTML email link: with href set to: mailto:[e-mail] This will open the users default email client and allow them to send an email to you directly.

[@wolfie8748]

@@nikita-dev thank you very much!

[@suhaib789]

Error: Connection timeout code: 'ETIMEOUT', command: 'CONN' Please tell me how i can solve this error.

[@nikita-dev]

when are you getting this error?

[@shrutishende4819]

its not working for me . i mean locally its send message but when i push code using vercel it failed to send message

[@nikita-dev]

are you using environment variables properly? And what email provider are you using?

[@shrutishende4819]

@@nikita-dev yess.. now its working .. i have to set env varriable in vercel. btw thank you so much for this video. its very helpful and i am using it in my personal poertfolio website.

[@CodingSnippets2.0]

Sir when I deploy this aap to firebase hosting nodemailer does not send an email..please reply

[@nikita-dev]

This is because firebase hosting only supports static files (not SSR pages or API routes). It's possible to host your entire Next App (or just API routes) through Firebase functions, but it gets pretty complicated. I would recommend sticking with Vercel or Netlify for deploying NextJS apps. More details here: stackoverflow.com/questions/70992583/nextjs-api-routes-not-working-with-firebase-hosting

[@CodingSnippets2.0]

@@nikita-dev can we host APIs which build in next js like in api folder to vercel?

[@nikita-dev]

yes, Vercel supports SSR and API routes

[@elitkondor7371]

As far as I could tell, gmail does not support media queries