Setting Up a Next.js Application and a Signup Form
To demonstrate this process, I have created a new Next.js application with a simple signup form where users can input their name and email address. When they click “sign up,” the form will trigger a function, which is where we’ll send our transactional email. The UI for this application was built using shadcn/ui.
Inside the Next.js App directory, you can find the homepage that includes a signup form component that already has UI and simple submission handling. This component will be responsible for sending the email once we have it configured.
Getting Started with React Email
To get started with React Email, you can either use the automatic setup to create a new project or manually set it up in an existing project. In this example, we will manually set up React Email in our existing Next.js project. You can also choose to organize your project differently, but for this walkthrough, we will store our emails in the src directory.
First, install the necessary dependencies by running the following command in your project:
npm install react-email @react-email/button @react-email/html -ENext, add a dev command to your package.json file:
{
"scripts": {
"email": "email dev"
}
}Now, create a new directory called emails inside your src directory, and create a welcome.tsx file inside this new folder. You can copy the basic email template provided by React Email and paste it into your welcome.tsx file.
import { Button } from '@react-email/button';
import { Html } from '@react-email/html';
import * as React from 'react';
export default function Email() {
return (
<Html>
<Button
pX={20}
pY={12}
href="https://example.com"
style={{ background: '#000', color: '#fff' }}
>
Click me
</Button>
</Html>
);
}To configure the Dev server to where we’re storing our emails, add a --dir flag to specify the directory in the dev command:
{
"scripts": {
"email": "email dev --dir src/emails"
}
}Running the command npm run email will start the Dev server. If it’s your first time running the command, React Email will install some additional dependencies to set up the environment properly. Once the Dev server is up, open the URL provided in your browser to access the email preview mode!
Creating and Customizing Email Templates with React
Now that you have the Dev server running, you can select the welcome email template from the sidebar to preview it. You will see the basic “click me” template, but we want something more customized.
React Email provides a variety of components to help you build your email templates easily. You can explore the documentation to learn about the available components, such as the Font, Heading, and Column components. If you’re a fan of Tailwind CSS, there is even a Tailwind component that you can use to wrap your email and apply Tailwind classes to your email design.
But instead of building an email template from scratch, you can use the example templates provided by React Email as a starting point. To keep things simple for this walkthrough, let’s use the Notion Magic Link template as the basis for our welcome email.
https://demo.react.email/preview/notion-magic-link
First, copy the Notion Magic Link template from the React Email examples and paste it into your welcome.tsx file. Next, install the required dependency – React Email Components:
npm install @react-email/componentsWith the template in place, you can now begin customizing your email. For example, change the header text, remove unnecessary links and elements, and update the email’s content to better suit your needs.
As you make changes to your email template, you can see the updates in real-time inside the Dev environment. You can even adjust styles, such as changing the footer’s background color.
Sending emails with Resend
Once we’re happy with our template, we can start sending these emails. React Email includes a few integrations with popular providers, but we can use Resend, who makes React Email, as it’s a nice an easy to use Email API.
To get started, you’ll need a Resend account and API key. You can additionally configure a domain so you can send emails from your own domain.
Once ready, install resend with:
npm install resendTo use Resend, we’ll need a place to trigger the code. To do this, we can create a new API route in Next.js.
Create a new directory src/app/api/email and inside create a new file route.ts.
Inside add the following:
import { NextResponse } from 'next/server';
import { Resend } from 'resend';
import WelcomeEmail from '@/src/emails/welcome';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(request: Request) {
const { firstName, email } = await request.json();
await resend.sendEmail({
from: '<Your Email Address>',
to: email,
subject: 'hello world',
react: WelcomeEmail({
firstName
})
});
return NextResponse.json({
status: 'Ok'
});
}This creates a new POST endpoint at /api/email, where we can configure Resend, including our API key as an environment variable, then dynamically send an email based off of a given first name and email field.
To make this work inside of the app, we can head over to our form, where inside of the triggering function, we can add:
await fetch('/api/email', {
method: 'POST',
body: JSON.stringify({
firstName: formData.firstName,
email: formData.email
})
})This will send a POST request to our API route along with dynamic data.
Make sure to replace or add the formData to include the real form’s data.
Once ready, submit your form and your should now see an email pop into your inbox!
Building better emails with React Email
React Email provides a powerful and easy-to-use solution for crafting custom email templates with confidence. By utilizing the React components and the provided example templates, you can create beautifully-designed emails tailored to the needs of your users. Whether you’re a seasoned developer or new to React, React Email is a valuable tool to have in your toolkit for building email templates.