Learn how to send Email using nodemailer in Next.Js
Introduction
So , i want to share my knowlwedge on how to send email using nodemailer in Next.Js. I hope you will enjoy this article.
What is nodemailer?
Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default.
Installation
To install nodemailer, you need to run the following command in your terminal or bash in your project directory:
$ npm install nodemailer
Usage
To use nodemailer, you need to import it in your project. You can do this by adding the following line of code in your project file. Go to your project directory inside the api folder and create a file called sendEmail.js or whatever you want to name it. Then add the following code in it:
import nodemailer from "nodemailer";
Create a transporter
To send an email using nodemailer, you need to create a transporter. You can do this by adding the following code in your sendEmail.js file:
const transporter = nodemailer.createTransport(
{
host: "smtp.ethereal.email",
port: 587,
auth: {
user: process.env.NEXT_PUBLIC_USER,
pass: process.env.NEXT_PUBLIC_PASS,
}
}
);
Using Gmail
for the transportter , if you want to use gmail, you need to set up your gmail account to allow less secure apps. You can do this by going to your gmail account and then go to settings and then go to security and then turn on the less secure apps option. you will be given a password for your gmail account. You need to use this generated password in your transporter as pass and your gmail account as the user.
const transporter = nodemailer.createTransport(
{ host: "gmail",
port: use 587 for less secure apps or 465 for secure apps,
auth: { user:"your gmail", pass: "your generated password", }
}
);
Using custom domain
If you want to use your custom domain , you will use the same password as your pass and email as the user in your transporter.
const transporter = nodemailer.createTransport(
{ host: "techworld.com.ng",
port: 465 to use secure apps or 587 to use less secure apps,
auth: { user: "richard@techworld.com", pass:"your password", }
}
);
Note: the above code is just an example. You need to replace the values with your own values.
Send an email
To send an email using nodemailer, you need to add the following code in your sendEmail.js file:
const mailOptions = {
from: "name of the sender",
to: "email of the receiver",
subject: "subject of the email",
text: "body of the email",
html: "<p>HTML version of the body</p>",
};
transporter.sendMail(mailOptions, (err, info) => {
if (err) {
console.log(err);
} else {
console.log(info);
}
});
All together
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import nodemailer from "nodemailer";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
// Using custom domain
const transporter = nodemailer.createTransport({
host: "techworld.com.ng",
port: 465,
auth: {
user: "richard@techworld.com",
pass:'your password'
},
});
// You can get the form data from the req.body,and it is also a good practice to store the password in an environment variable.
const mailOptions = {
from: req.body.email,
to: "email of the receiver",
subject: "subject of the email",
text: "body of the email",
html:"<p>HTML version of the body</p>",
};
await transporter.sendMail(mailOptions, (err, info) => {
if (err) {
console.log(err);
res.status(500).json({
message: err.message || "An error occurred while sending the email.",
});} else {
res.status(200).json({
message: info.messageId,
});
console.log(info);
}
});
}
export default handler;
Note:when using custom domain, you need to use the same password as your password and email as the user in your transporter and mostly the port is usually 465.
References
Conclusion
So, this is how you can send email using nodemailer in Next.Js. I hope you have enjoyed this article. If you have any questions, you can hi me on twitter or linkedin. Thank you for reading this article!
About RichardRichard is a passionate frontend developer and comfortable with utililizing programming language/frameworks such as Javascript, React, Next js and others. I'm passionate about solving problems, building products from concept to delivery.