Transactional Emails Made Simple with Resend

Dorian Baffier (Click here to go back)

February 18, 2023

Email remains one of the most effective channels for user communication, but implementing reliable, beautiful transactional emails has always been challenging.

The Email Problem

When I started building my latest SaaS application, I knew email would be a critical component:

Traditional email services required complex setup, template management, and often resulted in emails that looked terrible on mobile devices.

Enter Resend

Resend has completely transformed how I implement email functionality in my applications. Built by the team behind React Email, it combines:

React Email Templates

The most impressive aspect of Resend is the ability to use React to build email templates:

import { 
  Body, 
  Button, 
  Container, 
  Head, 
  Heading, 
  Html, 
  Preview, 
  Text 
} from '@react-email/components';

export const WelcomeEmail = ({ username }) => (
  <Html>
    <Head />
    <Preview>Welcome to our platform, {username}!</Preview>
    <Body>
      <Container>
        <Heading>Welcome, {username}!</Heading>
        <Text>We're excited to have you on board.</Text>
        <Button href="https://example.com/get-started">
          Get Started
        </Button>
      </Container>
    </Body>
  </Html>
);

This approach ensures consistent rendering across email clients and allows me to reuse components across different email types.

Integration with Next.js

Implementing Resend in a Next.js application is straightforward:

// pages/api/send-welcome.js
import { Resend } from 'resend';
import { WelcomeEmail } from '../../emails/welcome';

const resend = new Resend('re_123456789');

export default async function handler(req, res) {
  const { email, username } = req.body;
  
  try {
    const data = await resend.emails.send({
      from: 'onboarding@example.com',
      to: email,
      subject: 'Welcome to our platform!',
      react: WelcomeEmail({ username }),
    });
    
    res.status(200).json(data);
  } catch (error) {
    res.status(400).json(error);
  }
}

Analytics and Deliverability

Beyond the developer experience, Resend provides comprehensive analytics that help me understand:

This data has been invaluable for optimizing my email workflows and ensuring messages are actually reaching users.

Conclusion

If you're still struggling with email implementation in your applications, I highly recommend giving Resend a try. The combination of React-based templates, simple API, and reliable delivery has made it an essential part of my development stack.