Send Beautiful Transactional Emails from Next.js with Resend + React Email

#nextjs #email #react #tutorial

Most email tutorials use raw HTML strings. In 2026 we have React Email — write email templates as JSX components. Combined with Resend, you get type-safe, beautiful transactional emails in minutes.

Setup

npm install resend @react-email/components

Create a template

// emails/WelcomeEmail.tsx
import { Html, Body, Container, Heading, Text, Button, Hr } from "@react-email/components";

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Body style={{ backgroundColor: "#09090b", fontFamily: "sans-serif" }}>
        <Container style={{ maxWidth: "500px", margin: "0 auto", padding: "40px" }}>
          <Heading style={{ color: "#f4f4f5", fontSize: "24px" }}>
            Welcome, {name}! 
          </Heading>
          <Text style={{ color: "#a1a1aa", fontSize: "14px", lineHeight: "24px" }}>
            Thanks for signing up. You are all set to start building.
          </Text>
          <Button
            href="https://yourapp.com/dashboard"
            style={{
              backgroundColor: "#3b82f6",
              color: "#fff",
              padding: "12px 24px",
              borderRadius: "8px",
              fontSize: "14px",
            }}
          >
            Go to Dashboard
          </Button>
          <Hr style={{ borderColor: "#27272a", margin: "32px 0" }} />
          <Text style={{ color: "#52525b", fontSize: "12px" }}>
            If you did not create this account, ignore this email.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

Send it

import { Resend } from "resend";
import { WelcomeEmail } from "@/emails/WelcomeEmail";

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: "onboarding@yourdomain.com",
  to: user.email,
  subject: "Welcome to MyApp!",
  react: WelcomeEmail({ name: user.name }),
});

Why this beats raw HTML

Type safety — TypeScript catches typos in your templates
Composable — reuse components across emails (headers, footers, buttons)
Testable — render emails in a browser during development
Maintainable — JSX is readable, raw HTML email is not

In an API route

// src/app/api/contact/route.ts
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  const { name, email, message } = await req.json();

  await resend.emails.send({
    from: "contact@yourdomain.com",
    to: "team@yourdomain.com",
    subject: `Contact from ${name}`,
    text: `From: ${name} (${email})\n\n${message}`,
  });

  return Response.json({ sent: true });
}