Next.js – Sending Emails

Next.js

Sending Emails

Sending transactional emails in Next.js using Resend and React Email.

Email Send API: Using the Resend SDK to dispatch an email via a route handler.

📄app/api/send/route.ts
TS

import { NextResponse } from 'next/server';
import { Resend } from 'resend';
import { WelcomeEmail } from '@/components/emails/WelcomeEmail';

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

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

    const data = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>',
      to: [email],
      subject: 'Welcome to Acme!',
      react: WelcomeEmail({ firstName: name }),
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error }, { status: 500 });
  }
}

React Email Template: A responsive email template built with React components.

📄components/emails/WelcomeEmail.tsx
TSX

import * as React from 'react';
import { Html, Head, Body, Container, Text } from '@react-email/components';

interface WelcomeEmailProps {
  firstName: string;
}

export const WelcomeEmail: React.FC<Readonly<WelcomeEmailProps>> = ({
  firstName,
}) => (
  <Html>
    <Head />
    <Body style={main}>
      <Container style={container}>
        <Text style={heading}>Welcome to Acme, {firstName}!</Text>
        <Text style={paragraph}>
          We're thrilled to have you on board. Let us know if you have any questions.
        </Text>
      </Container>
    </Body>
  </Html>
);

const main = {
  backgroundColor: '#ffffff',
  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
};

const container = {
  margin: '0 auto',
  padding: '20px 0 48px',
};

const heading = {
  fontSize: '24px',
  letterSpacing: '-0.5px',
  lineHeight: '1.3',
  fontWeight: '400',
  color: '#484848',
  padding: '17px 0 0',
};

const paragraph = {
  fontSize: '15px',
  lineHeight: '1.4',
  color: '#3c3f44',
};