Resend + Astro: transactional emails that don't hit spam

Resend is the simplest way to send transactional emails in production that exists. No SMTP configuration, no manual SPF/DKIM setup, no Sendgrid, no Mailgun, zero overhead. In 30 minutes you have emails going out, and in 2 hours you have full bounce monitoring.

I use Resend in almost every web app I build. Sign-up confirmation, password reset, payment notifications, data recaps. Started using it in 2024 when it was still beta and never looked back.

This post is for anyone who wants to go from zero to deploy with Resend + Astro Actions on a Saturday night. I’ll show you the real setup, the gotchas nobody mentions, how to structure emails with React Email without looking like 2010, and how to monitor bounces so you’re not flying blind.

Why Resend beats traditional SMTP

SMTP is good if you want to learn infrastructure. It’s bad if you want your emails to go out without waking you up at 2 AM.

With Sendgrid or Mailgun, you need to: create an account, grab an API key, configure SPF and DKIM on your domain, wait for propagation, test, debug “why did my email go to spam”. Resend automates all of this. You pass the API key to a function, send the email, Resend handles delivery with their reputation.

Cost is aggressive: Resend charges 20-50 cents per email. If you send 10k emails/month, you’re looking at $100-200. Sendgrid has a free tier of 100/day and then it gets expensive. Mailgun same thing. For a solo dev with clients doing 50-500 messages/month, Resend is basically free.

The other advantage is native tracking. Resend shows how many emails were delivered, how many were opened, how many were clicked. You don’t need to add pixel tracking. Everything is automatic, anonymized, no JavaScript in the email.

And most important: Resend takes care of your domain reputation. You use a subdomain of theirs (bounce@resend.dev by default) and they guarantee it never hits spam. You don’t inherit the bad reputation from whoever used your IP before.

Setup: 5 minutes to your first email

We start here.

Step 1: create account at resend.com. GitHub, Google, email. Pick one.

Step 2: go to Settings > API Keys and generate a key. Copy it.

Step 3: in Astro, install the client:

npm install resend react

(React is needed for React Email later)

Step 4: create .env.local file:

PUBLIC_RESEND_API_KEY=re_xxxxx

I’ll talk about this later. For now leave it public.

Step 5: create an Astro endpoint. File src/pages/api/send-email.ts:

import { Resend } from "resend";
import type { APIRoute } from "astro";

const resend = new Resend(import.meta.env.PUBLIC_RESEND_API_KEY);

export const POST: APIRoute = async ({ request }) => {
  const { email } = await request.json();

  try {
    const { data, error } = await resend.emails.send({
      from: "your-app@yourdomain.com",
      to: email,
      subject: "Welcome to app",
      html: "<p>You signed up! Confirm your email.</p>",
    });

    if (error) {
      return new Response(JSON.stringify({ error: error.message }), {
        status: 400,
      });
    }

    return new Response(JSON.stringify({ success: true, data }), {
      status: 200,
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: "Internal error" }), {
      status: 500,
    });
  }
};

Done. Call this endpoint from your front, pass { email: "user@example.com" }, the email goes out.

Already working in 5 minutes. I tested it now.

React Email: templates that don’t look like 2010

Sending raw HTML is easy. The problem is that inline HTML in email is painful. You have to write inline styles because many email clients don’t support <style>. It looks like this:

<table
  cellpadding="0"
  cellspacing="0"
  style="width: 100%; max-width: 600px; margin: 0 auto;"
>
  <tr>
    <td style="padding: 20px; background-color: #f5f5f5; font-family: Arial;">
      Hello
    </td>
  </tr>
</table>

Tedious.

React Email solves this. You write a normal React component (with clean JSX), and it compiles to optimized email HTML.

Install:

npm install @react-email/components

Now create component in src/emails/welcome.tsx:

import {
  Body,
  Button,
  Container,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Text,
} from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
  confirmUrl: string;
}

export const WelcomeEmail = ({ name, confirmUrl }: WelcomeEmailProps) => (
  <Html>
    <Head />
    <Preview>Welcome, {name}!</Preview>
    <Body style={{ fontFamily: "Arial, sans-serif" }}>
      <Container style={{ maxWidth: "600px", margin: "0 auto" }}>
        <Section style={{ padding: "20px" }}>
          <Text style={{ fontSize: "24px", fontWeight: "bold" }}>
            Welcome!
          </Text>
          <Text>Hi {name}, how are you?</Text>
          <Text>Click the button below to confirm your email:</Text>

          <Button
            href={confirmUrl}
            style={{
              background: "#007bff",
              color: "white",
              padding: "10px 20px",
              borderRadius: "4px",
              textDecoration: "none",
            }}
          >
            Confirm email
          </Button>

          <Hr />
          <Text style={{ fontSize: "12px", color: "#666" }}>
            If you didn't sign up, ignore this email.
          </Text>
        </Section>
      </Container>
    </Body>
  </Html>
);

Now in the endpoint, import and use:

import { render } from "@react-email/render";
import { WelcomeEmail } from "../emails/welcome";

export const POST: APIRoute = async ({ request }) => {
  const { email, name, confirmToken } = await request.json();
  const confirmUrl = `https://yoursite.com/confirm?token=${confirmToken}`;

  try {
    const html = await render(
      <WelcomeEmail name={name} confirmUrl={confirmUrl} />
    );

    const { data, error } = await resend.emails.send({
      from: "your-app@yourdomain.com",
      to: email,
      subject: "Welcome to app",
      html,
    });

    if (error) {
      return new Response(JSON.stringify({ error: error.message }), {
        status: 400,
      });
    }

    return new Response(JSON.stringify({ success: true }), { status: 200 });
  } catch (err) {
    return new Response(JSON.stringify({ error: "Internal error" }), {
      status: 500,
    });
  }
};

Boom. Professional template, optimized HTML, no getting tangled up.

Own domain: SPF, DKIM, DMARC painless

Here comes the part that sounds scary but is simple.

By default, Resend sends from bounce@resend.dev. Your client receives email from a foreign address. Not professional.

Solution: register your domain with Resend. Then the email comes from noreply@yourdomain.com for real.

To do this:

1. In Settings > Domains, click “Add Domain”
2. Put noreply.yourdomain.com (or mail, or notifications, name doesn’t matter)
3. Resend gives you 3 DNS records to add: one SPF, one DKIM, one DMARC

You go into your registrar’s panel (GoDaddy, Namecheap, CloudFlare, any of them), go to DNS and add those records. Wait 10 minutes for propagation, go back to Resend and click “Verify”. Done.

Then all your emails go out from noreply@yourdomain.com. Your domain, your reputation. Email doesn’t hit spam because you’re using Resend’s infrastructure, but the “from” is really yours.

DKIM is a digital signature of the email. Receiving server validates and sees the email is legitimate.

SPF is a list of servers authorized to send email on behalf of your domain.

DMARC is a policy for how to handle email that fails SPF/DKIM.

Resend configures all this automatically. You just copy and paste into DNS. No code.

Email confirmation in practice

Now a complete example: sign-up page, user enters email, you send confirmation email, they click the link, they confirm.

Step 1: user signs up. In signup endpoint:

import { v4 as uuid } from "uuid";

export const POST: APIRoute = async ({ request }) => {
  const { email, name } = await request.json();

  // Validations
  if (!email || !name) {
    return new Response(JSON.stringify({ error: "Missing fields" }), {
      status: 400,
    });
  }

  try {
    // Generates unique token for confirmation
    const confirmToken = uuid();
    const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24h

    // Saves to database (example with Supabase)
    await supabase.from("users").insert({
      email,
      name,
      confirm_token: confirmToken,
      token_expires_at: expiresAt,
      email_confirmed: false,
    });

    // Builds confirmation link
    const confirmUrl = `${import.meta.env.SITE_URL}/confirm?token=${confirmToken}`;

    // Sends email
    const html = await render(
      <WelcomeEmail name={name} confirmUrl={confirmUrl} />
    );

    await resend.emails.send({
      from: "noreply@yourdomain.com",
      to: email,
      subject: "Confirm your email",
      html,
    });

    return new Response(JSON.stringify({ success: true }), { status: 201 });
  } catch (err) {
    console.error(err);
    return new Response(JSON.stringify({ error: "Internal error" }), {
      status: 500,
    });
  }
};

Step 2: confirmation page at src/pages/confirm.astro:

---
import { supabase } from "../lib/supabase";

const { token } = Astro.url.searchParams;

let message = "";
let isError = false;

if (token) {
  const { data: user, error } = await supabase
    .from("users")
    .select("*")
    .eq("confirm_token", token)
    .single();

  if (error || !user) {
    message = "Invalid or expired token";
    isError = true;
  } else if (new Date(user.token_expires_at) < new Date()) {
    message = "Token expired. Ask for a new one.";
    isError = true;
  } else {
    // Token valid, confirms email
    await supabase
      .from("users")
      .update({
        email_confirmed: true,
        confirm_token: null,
      })
      .eq("id", user.id);

    message = "Email confirmed successfully!";
  }
}
---

<html>
  <body>
    {
      isError ? (
        <div style="color: red">{message}</div>
      ) : (
        <div style="color: green">{message}</div>
      )
    }
  </body>
</html>

Simple. Token with expiration, validation on link click, mark as confirmed in database.

Bounce monitoring

Email doesn’t exist, inbox is full, or domain rejected. Bounce.

Resend detects bounces automatically. The problem is you don’t want to discover your emails are failing months later.

Solution: event webhooks.

In Settings > Webhooks on Resend, you register a webhook URL. Every time an email bounces, Resend sends a POST to that URL with the details.

Endpoint to receive webhook at src/pages/api/webhooks/resend.ts:

import type { APIRoute } from "astro";
import { supabase } from "../../lib/supabase";

export const POST: APIRoute = async ({ request }) => {
  const event = await request.json();

  if (event.type === "email.bounced") {
    const { email, reason } = event.data;

    // Marks email as invalid in database
    await supabase
      .from("users")
      .update({
        email_valid: false,
        bounce_reason: reason,
      })
      .eq("email", email);

    console.log(`Email ${email} bounced: ${reason}`);
  }

  if (event.type === "email.complained") {
    // User marked as spam
    const { email } = event.data;

    await supabase
      .from("users")
      .update({ email_valid: false })
      .eq("email", email);

    console.log(`Email ${email} marked as spam`);
  }

  return new Response(JSON.stringify({ success: true }), { status: 200 });
};

Resend webhook always sends an x-resend-signature header. You should validate this to be sure it’s legitimate. I won’t go into detail here (it’s HMAC-SHA256), but the important thing is to register when a bounce happens and mark it as invalid in your database.

Rate limiting and best practices

Resend has a limit of 300 emails per second. If you’re sending individual sign-up confirmations, you’ll never hit that limit. If you’re doing newsletters, watch out.

Practices I use:

1. Use templates for everything. Don’t send raw HTML. React Email standardizes.

2. Always validate email on the frontend before sending to Resend. Avoids silly rejections.

3. Add replyTo if it makes sense. Some emails you want replies to go somewhere:

resend.emails.send({
  from: "noreply@yourdomain.com",
  to: email,
  replyTo: "support@yourdomain.com",
  subject: "...",
  html: "...",
});

4. Monitor bounces religiously. Bounce rate above 2% is a problem.

5. Use subdomains to categorize. signup@, billing@, notifications@. Helps with reputation.

6. Never send email without implicit confirmation from the person. GDPR, CCPA, CAN-SPAM, everything requires consent.

Real costs

Resend charges per email sent.

Current pricing (2026):

• Up to 3k emails/month: free
• Above that: 20 cents per email (with volume discount)

My medical clinic client sending 200 emails/month: free.

My SaaS client sending 15k emails/month (notifications + newsletter): $60/month.

Compare to Sendgrid ($20/month + usage) or Mailgun ($35/month + usage). Resend is competitive.

Common troubleshooting

Email doesn’t arrive: 90% of the time user is checking spam folder. Test sending to yourself first. If it hits spam even coming from your verified domain in Resend, it’s because your content looks like spam (too many links, weird layout, word “payment” too much).

Email goes to spam: use preview text (that text that shows up after the subject line in Gmail). Test on Litmus or similar to see how it looks in various clients.

403 error or domain error: check if you added the domain to Resend and verified it. Email is going out from a domain Resend doesn’t know about.

Invalid API key: might be revoked. Resend doesn’t expire keys, but if you shared it by accident, generate a new one.

Next steps

Once you have the basics working:

1. Simple design system with Tailwind to standardize your emails
2. Supabase + React integration to persist email history
3. Core Web Vitals 2026 because email delivery impacts overall UX

Resend is infrastructure, but infrastructure is what separates amateur apps from professional ones. Emails going out in 1 second, monitored, not hitting spam, makes a difference.

• Create Resend account
• Install npm client
• Create first endpoint with raw HTML
• Install React Email and create template component
• Add own domain and verify DNS
• Implement email confirmation with token
• Register bounce webhook
• Test sending to multiple clients (Gmail, Outlook, Apple)
• Add monitoring to your dashboard