DEV Community

Cover image for Sending Emails with Ease: A Step-by-Step Guide to Using Nodemailer with TypeScript in Next.js
ariburaco
ariburaco

Posted on • Edited on • Originally published at mystickynotes.net

Sending Emails with Ease: A Step-by-Step Guide to Using Nodemailer with TypeScript in Next.js

About Nodemailer

Nodemailer is a popular library for sending emails in Node.js. It allows you to send emails using various transport methods, such as SMTP, AWS SES, and more. In this post, we will be using Nodemailer with TypeScript to send emails from a Next.js application.

Before diving into the code example, let's go over some key concepts of Nodemailer. Nodemailer is a module for Node.js applications to send emails. It supports various transport methods such as SMTP, AWS SES, and more. With Nodemailer, you can send plaintext or HTML emails, attachments, and more.

Use Cases for Nodemailer

Nodemailer is a versatile library that can be used in a variety of different use cases. Some common use cases include:

  • Sending confirmation emails: When a user signs up for a service or makes a purchase, a confirmation email can be sent to their email address to confirm the action.

  • Sending password reset emails: When a user forgets their password, a password reset link can be sent to their email address to allow them to reset their password.

  • Sending notifications: Applications can send notifications to users via email, such as updates on their account or new features that have been added.

  • Sending marketing emails: Applications can send marketing emails to users, such as newsletters or promotional offers.

  • Sending bulk emails: Applications can send bulk emails to a large number of users at once, such as in the case of a mass mailing campaign.

  • Sending automated emails: Applications can send automated emails in response to certain events or actions, such as when a user's account is about to expire.

  • Send HTML email Templates: Applications can use Nodemailer to send HTML email Templates, which can be designed and customized to match the look and feel of the application.

  • Sending emails with attachments: Applications can use Nodemailer to send emails with attachments, such as invoices, receipts, or other files.

These are just a few examples of the many use cases for Nodemailer, it is a very flexible library that can be used in many different ways to meet the needs of your application.

In this post, we'll be using the SMTP transport method to send emails using a Gmail account. We will be using TypeScript to write our code, which adds type safety and improved code organization to our application.

Now that we understand the basics of Nodemailer and TypeScript, let's take a look at the code example.

Implementation of Emailer Class

The code below shows an implementation of the Nodemailer library in TypeScript. The Emailer class is used to send emails using a Gmail account. It uses the nodemailer.createTransport() method to create a transporter object, which is used to send emails.


import * as nodemailer from "nodemailer";
import { MailOptions } from "nodemailer/lib/json-transport";

export class Emailer {
  private readonly transporter: nodemailer.Transporter;

  constructor() {
    this.transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.GMAIL_USER,
        pass: process.env.GMAIL_PASSWORD,
      },
    });
  }

  public sendEmail(mailOptions: MailOptions) {
    return this.transporter.sendMail(mailOptions);
  }

  public notifyAdminForNewUser(email: string, username: string) {
    this.sendEmail(notifyAdminNewUserEmailTemplate(email, username));
  }

  public notifyUserForSignup(email: string, username: string) {
    this.sendEmail(newUserEmailTemplate(email, username));
  }
}

export const emailer = new Emailer();

export const newUserEmailTemplate = (email: string, username: string) => {
  return {
    from: process.env.GMAIL_USER,
    to: email,
    subject: `${username}, Welcome to the our website`,
    text: "Welcome to the our website",
    html: `
      <h1>Welcome to our website!</h1>
      <p>We're glad you've decided to join us. We hope you find everything you're looking for here and enjoy using our site.</p>
      <p>If you have any questions or need any help, please don't hesitate to contact us. Thank you for signing up!</p>
    `,
  } as MailOptions;
};

export const notifyAdminNewUserEmailTemplate = (
  email: string,
  username: string
) => {
  return {
    from: process.env.GMAIL_USER,
    to: process.env.GMAIL_USER,
    subject: `New User: ${username} - email: ${email}`,
    text: `New User: ${username} - email: ${email}`,
    html: `
      <h1>New User: ${username}</h1>
      <p>email: ${email}</p>
    `,
  } as MailOptions;
};

Enter fullscreen mode Exit fullscreen mode

The class has two methods, notifyAdminForNewUser and notifyUserForSignup, which use the sendEmail method to send emails to the new user and the admin, respectively. The sendEmail method takes in a mailOptions object, which contains the recipient's email, subject, and the message.

The newUserEmailTemplate and notifyAdminNewUserEmailTemplate functions are used to create the mailOptions object for the new user and admin emails, respectively. They take in the user's email and username as arguments and return an object with the recipient's email, subject, and message.

It's worth noting that the code is using process.env.GMAIL_USER and process.env.GMAIL_PASSWORD to authenticate with gmail, You should replace it with your own Gmail user and password.

To obtain the Gmail password, you should go to the settings on Gmail and create an App Password, please remember that you need to activate the 2FA for your google account.

Conclusion

Nodemailer with TypeScript makes it easy to send emails from a Next.js application. With the help of the Emailer class and the mailOptions object, you can send emails with ease. Of course, this implementation will only work on the server side of the NextJS Application. If you want to send email from client side, you just need to create an API endpoint under the /pages/apidirectory.

In this post, we've shown how to send emails using a Gmail account, but you can also use other transport methods such as AWS SES to send emails. You can expand the class methods to meet your needs.

Note: The post prepared by the help of ChatGPT, but all code part is written by my.

Thank you for reading my post! If you enjoyed it and found it informative, I would greatly appreciate it. If you're interested in more content like this, be sure to check out my blog for more articles on similar topics.

Top comments (2)

Collapse
 
ownvrgs24 profile image
Owen Jasper Vargas

Hello! Im getting this error!

error Error: read ECONNRESET at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20) { digest: undefined }

Collapse
 
mxglt profile image
Maxime Guilbert • Edited

Hi Owen,

Sorry I can't help you on this as I haven't tested yet the library, but can you add more context to your issue?
What did you try to do? When did you have this error? Can you paste a sample of your code with the error?

With these little things, it will be easier for anyone which will try to help you to reproduce your case. Ad then, help you to fix your issue. :)

Have a nice day