Skip to main content
Nodemailer is the most popular Node.js module for sending emails. It supports SMTP and other transport methods, making it versatile for various email sending scenarios.

​
Installation

1

Install dependencies

Install React Email components and Nodemailer:
npm install react-email @react-email/components nodemailer
npm install -D @types/nodemailer
2

Configure SMTP settings

Set up your SMTP credentials as environment variables:
SMTP_HOST=smtp.example.com
SMTP_PORT=465
SMTP_USER=your_user
SMTP_PASS=your_password

​
Usage

​
Create an email component

emails/email.tsx
import { Button, Html } from '@react-email/components';

interface EmailProps {
  url: string;
}

export const Email: React.FC<Readonly<EmailProps>> = ({ url }) => {
  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
};

​
Send the email

index.tsx
import { render } from '@react-email/components';
import nodemailer from 'nodemailer';
import { Email } from './email';

const transporter = nodemailer.createTransport({
  host: 'smtp.forwardemail.net',
  port: 465,
  secure: true,
  auth: {
    user: 'my_user',
    pass: 'my_password',
  },
});

const emailHtml = await render(<Email url="https://example.com" />);

const options = {
  from: '[email protected]',
  to: '[email protected]',
  subject: 'hello world',
  html: emailHtml,
};

await transporter.sendMail(options);

​
Transport options

Nodemailer supports various transport methods:

​
SMTP

const transporter = nodemailer.createTransport({
  host: 'smtp.example.com',
  port: 587,
  secure: false, // true for 465, false for other ports
  auth: {
    user: 'username',
    pass: 'password',
  },
});

​
Gmail

const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: '[email protected]',
    pass: 'your-app-password',
  },
});

​
SendGrid SMTP

const transporter = nodemailer.createTransport({
  host: 'smtp.sendgrid.net',
  port: 587,
  auth: {
    user: 'apikey',
    pass: process.env.SENDGRID_API_KEY,
  },
});

​
Additional features

​
Attachments

await transporter.sendMail({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'hello world',
  html: emailHtml,
  attachments: [
    {
      filename: 'document.pdf',
      path: '/path/to/document.pdf',
    },
  ],
});

​
Plain text fallback

import { render } from '@react-email/components';

const emailHtml = await render(<Email url="https://example.com" />);
const emailText = await render(<Email url="https://example.com" />, {
  plainText: true,
});

await transporter.sendMail({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'hello world',
  html: emailHtml,
  text: emailText,
});

Build docs developers (and LLMs) love

Get started for freeTalk to us