In this tutorial, we will learn how to create and send HTML emails with React Email and Next.js
Prerequisites
Getting Started
Let's start with a new Next.js project. You can use the Next.js CLI to create a new project.
npx create-next-app next-email --ts
Wait for the project to be created. Once the project is created, let's move into the project directory.
cd next-email
Create Email Template
We will use the React Email to create a new email template.
Let's install dependencies.
npm install react-email @react-email/html @react-email/text @react-email/section @react-email/container -E
Now, let's create a new email template using the React Email components. This is a simple React component that will be converted to HTML email template.
We will create a new file emails/WelcomeTemplate.tsx
and add the following code.
import { Html } from "@react-email/html"
import { Text } from "@react-email/text"
import { Section } from "@react-email/section"
import { Container } from "@react-email/container"
export default function WelcomeEmail() {
return (
<Html>
<Section style={main}>
<Container style={container}>
<Text style={heading}>Hi there!</Text>
<Text style={paragraph}>Welcome to our app!</Text>
</Container>
</Section>
</Html>
)
}
// Styles for the email template
const main = {
backgroundColor: "#ffffff",
}
const container = {
margin: "0 auto",
padding: "20px 0 48px",
width: "580px",
}
const heading = {
fontSize: "32px",
lineHeight: "1.3",
fontWeight: "700",
color: "#484848",
}
const paragraph = {
fontSize: "18px",
lineHeight: "1.4",
color: "#484848",
}
Preview Email Template
Add the following script in your package.json
file.
{
"scripts": {
"preview-email": "email dev"
}
}
Now, you can preview your email template by running the following command.
npm run preview-email
This will start a local server and open your email template in the browser.
Send Email with Nodemailer
Let's install Nodemailer.
npm install nodemailer
npm i --save-dev @types/nodemailer
Create a new helper file lib/email.ts
and add the following code. This will take care of sending emails using Nodemailer and the SMTP server.
Find the source code on GitHub
import nodemailer from "nodemailer"
type EmailPayload = {
to: string
subject: string
html: string
}
// Replace with your SMTP credentials
const smtpOptions = {
host: process.env.SMTP_HOST || "smtp.mailtrap.io",
port: parseInt(process.env.SMTP_PORT || "2525"),
secure: false,
auth: {
user: process.env.SMTP_USER || "user",
pass: process.env.SMTP_PASSWORD || "password",
},
}
export const sendEmail = async (data: EmailPayload) => {
const transporter = nodemailer.createTransport({
...smtpOptions,
})
return await transporter.sendMail({
from: process.env.SMTP_FROM_EMAIL,
...data,
})
}
Make sure your .env
file contains the following environment variables.
SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASSWORD=
SMTP_FROM_EMAIL=
Now, let's create a new file pages/api/send-email.ts
and add the following code.
import type { NextApiRequest, NextApiResponse } from "next"
import { render } from "@react-email/render"
import WelcomeTemplate from "../../emails/WelcomeTemplate"
import { sendEmail } from "../../lib/email"
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
await sendEmail({
to: "kiran@example.com",
subject: "Welcome to NextAPI",
html: render(WelcomeTemplate()),
})
return res.status(200).json({ message: "Email sent successfully" })
}
Now you can visit http://localhost:3000/api/send-email
to send the email.
If you're planning to build a SaaS app, then you might be interested in NextAPI. NextAPI is a Next.js RESTful API Starter for building SaaS Apps. NextAPI can handle the heavy lifting for common SaaS features such as authentication, team management, invites, subscriptions, and more.
Top comments (3)
Loved this <3
Thanks @abhaysinghr1