DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free API — Modern Email for Developers Who Hate Email

#email #react #webdev #tutorial

Resend is an email API for developers. Send transactional emails with React components, get delivery analytics, and never configure SMTP again.

Why Resend?

  • React Email — build emails with React components
  • Simple API — one function call to send
  • Free tier — 3,000 emails/month, 1 domain
  • Delivery analytics — opens, clicks, bounces, complaints

Quick Start 

npm install resend
Enter fullscreen mode Exit fullscreen mode 
import { Resend } from 'resend';

const resend = new Resend('re_YOUR_API_KEY');

const { data, error } = await resend.emails.send({
  from: 'hello@yourdomain.com',
  to: 'alice@example.com',
  subject: 'Welcome!',
  html: '<h1>Welcome to our app!</h1>',
});
Enter fullscreen mode Exit fullscreen mode

React Email Templates 

npm install @react-email/components
Enter fullscreen mode Exit fullscreen mode 
import {
  Html, Head, Body, Container, Text, Button, Img,
} from '@react-email/components';

function WelcomeEmail({ name, loginUrl }: { name: string; loginUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif', background: '#f4f4f4' }}>
        <Container style={{ padding: '20px', background: 'white', borderRadius: '8px' }}>
          <Img src="https://yourapp.com/logo.png" width={120} />
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
            Welcome, {name}!
          </Text>
          <Text>
            Thanks for signing up. Click below to get started.
          </Text>
          <Button
            href={loginUrl}
            style={{
              background: '#3498db',
              color: 'white',
              padding: '12px 24px',
              borderRadius: '6px',
            }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

export default WelcomeEmail;
Enter fullscreen mode Exit fullscreen mode 
import WelcomeEmail from './emails/welcome';

await resend.emails.send({
  from: 'hello@yourapp.com',
  to: 'alice@example.com',
  subject: 'Welcome!',
  react: WelcomeEmail({ name: 'Alice', loginUrl: 'https://yourapp.com/login' }),
});
Enter fullscreen mode Exit fullscreen mode

Batch Sending 

await resend.batch.send([
  {
    from: 'hello@yourapp.com',
    to: 'alice@example.com',
    subject: 'Your weekly report',
    html: '<p>Report here</p>',
  },
  {
    from: 'hello@yourapp.com',
    to: 'bob@example.com',
    subject: 'Your weekly report',
    html: '<p>Different report</p>',
  },
]);
Enter fullscreen mode Exit fullscreen mode

Webhooks 

// POST /api/webhooks/resend
export async function POST(request: Request) {
  const body = await request.json();

  switch (body.type) {
    case 'email.delivered':
      console.log('Delivered to:', body.data.to);
      break;
    case 'email.opened':
      console.log('Opened by:', body.data.to);
      break;
    case 'email.bounced':
      console.log('Bounced:', body.data.to);
      await removeFromMailingList(body.data.to);
      break;
  }

  return new Response('OK');
}
Enter fullscreen mode Exit fullscreen mode

REST API 

curl -X POST 'https://api.resend.com/emails' \
  -H 'Authorization: Bearer re_YOUR_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "from": "hello@yourapp.com",
    "to": "alice@example.com",
    "subject": "Hello",
    "html": "<p>Hi there!</p>"
  }'
Enter fullscreen mode Exit fullscreen mode

Need email notifications for scraped data? Check out my Apify actors for web scraping + email alerts. Email spinov001@gmail.com for custom solutions.

Resend, SendGrid, or Postmark — which email API do you use? Share below!

Top comments (0)