E-Mail & API

Resend mit Claude Code: Transaktionale E-Mails 2026

6. Mai 2026 · 10 min Lesezeit · E-Mail & API

Resend hat sich als die Developer-First E-Mail-API der Wahl etabliert. Mit Claude Code als KI-gestütztem Entwicklungshelfer lassen sich React Email Templates, Webhooks, Audiences und DNS-Konfiguration deutlich schneller und fehlerärmer umsetzen. In diesem Guide zeigen wir den kompletten Stack — von der ersten E-Mail bis zur Produktions-Deliverability.

1. Resend Setup & erste E-Mail

Resend bietet eine extrem saubere TypeScript-SDK-API. Claude Code generiert den Boilerplate auf Knopfdruck — du musst nur noch den API-Key eintragen und die Absenderadresse verifizieren.

INSTALL

Pakete installieren und TypeScript-Typen verfügbar machen:

# Resend SDK + React Email Renderer
npm install resend @react-email/components react react-dom
npm install -D typescript @types/react @types/node

Das SDK wird als ES-Modul oder CommonJS-Import genutzt. Claude Code bevorzugt named imports mit expliziter Typannotation:

SDK INIT

// src/lib/email.ts
import { Resend } from 'resend';

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

export { resend };

Die erste transaktionale E-Mail ist bewusst schlank gehalten — plain text mit minimalen Feldern, um die API-Verbindung zu testen:

SEND

// src/scripts/send-first-email.ts
import { resend } from '../lib/email';

async function main() {
  const { data, error } = await resend.emails.send({
    from:    'Agentic Movers <noreply@agentic-movers.com>',
    to:      ['daniel@example.com'],
    subject: 'Willkommen bei Agentic Movers!',
    text:    'Danke für deine Registrierung. Viel Spaß beim Kurs!',
  });

  if (error) {
    console.error('Fehler beim Senden:', error);
    process.exit(1);
  }

  console.log('E-Mail gesendet, ID:', data?.id);
}

main();

Claude Code Prompt-Tipp: "Erstelle eine typsichere send-email Utility mit Resend, die sowohl HTML als auch React-Komponenten als body akzeptiert, Fehler als Result-Typ zurückgibt und einen dry-run-Modus für Tests unterstützt."

Claude Code generiert daraus automatisch ein generisches sendEmail<TProps>-Wrapper-Pattern, das die gesamte Codebasis konsistent hält. Der API-Key wird dabei nie im Code hardcodiert — Claude Code erkennt process.env.*-Zugriffe und schlägt direkt .env-Einträge vor.

API-Key und Domain-Verifikation

Im Resend-Dashboard unter API Keys einen Key mit Sending access erstellen. Für Webhooks wird zusätzlich Webhooks access benötigt. Domains werden unter Domains verifiziert — dazu müssen DNS-Records gesetzt werden (siehe Abschnitt 6).

ENV

# .env.local
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxx
RESEND_FROM_EMAIL=noreply@agentic-movers.com
RESEND_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxx

Mit dieser Grundkonfiguration lässt sich bereits die erste echte E-Mail versenden. Der nächste Schritt ist die Umstellung von plain-text auf hochwertige React-basierte HTML-Templates.

2. React Email Templates

React Email transformiert React-Komponenten in E-Mail-kompatibles HTML — inklusive Inline-Styles, Outlook-Hacks und responsive Design. Claude Code kennt die gesamte Komponenten-API und generiert vollständige Templates auf Basis einer einfachen Beschreibung.

KOMPONENTEN

Wichtigste React Email Komponenten und ihr Zweck:

Html — Wurzel-Element mit lang-Attribut
Head — Meta-Tags, globale Styles
Body — Hintergrundfarbe, Basis-Font
Container — Zentrierter max-width Wrapper (600px Standardbreite)
Section / Row / Column — Spalten-Layout
Text — Paragraph-Elemente mit Inline-Styles
Button — CTA-Buttons mit pxToPt-Konvertierung
Img — Bilder mit absolutem URL-Pfad
Hr — Horizontale Trennlinie
Link — Hyperlinks mit target-Attribut

Ein vollständiges Willkommens-E-Mail-Template mit Claude Code:

TEMPLATE

// emails/WelcomeEmail.tsx
import {
  Html, Head, Body, Container, Section,
  Text, Button, Img, Hr, Link, Preview
} from '@react-email/components';

interface WelcomeEmailProps {
  userName:   string;
  courseUrl:  string;
  loginUrl:   string;
}

export default function WelcomeEmail({
  userName,
  courseUrl,
  loginUrl,
}: WelcomeEmailProps) {
  return (
    <Html lang="de">
      <Head />
      <Preview>Willkommen, {userName}! Dein Kurs wartet.</Preview>
      <Body style={bodyStyle}>
        <Container style={containerStyle}>

          <Img
            src="https://agentic-movers.com/assets/img/logo.png"
            width="160"
            height="40"
            alt="Agentic Movers"
            style={{ marginBottom: '24px' }}
          />

          <Text style={headingStyle}>
            Willkommen, {userName}!
          </Text>

          <Text style={textStyle}>
            Schön, dass du dabei bist. Dein 14-tägiger kostenloser
            Zugang zum Claude Code Mastery Kurs ist jetzt aktiv.
          </Text>

          <Section style={{ textAlign: 'center', margin: '32px 0' }}>
            <Button href={courseUrl} style={buttonStyle}>
              Zum Kurs →
            </Button>
          </Section>

          <Hr style={hrStyle} />

          <Text style={footerStyle}>
            Fragen? Schreib uns:{' '}
            <Link href="mailto:support@agentic-movers.com">
              support@agentic-movers.com
            </Link>
          </Text>

        </Container>
      </Body>
    </Html>
  );
}

// Inline Styles (E-Mail-kompatibel)
const bodyStyle = {
  backgroundColor: '#f8fafc',
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
};
const containerStyle = {
  maxWidth: '600px',
  margin: '40px auto',
  backgroundColor: '#ffffff',
  borderRadius: '12px',
  padding: '40px',
  border: '1px solid #e2e8f0',
};
const headingStyle = {
  fontSize: '24px', fontWeight: '700',
  color: '#0f172a', margin: '0 0 16px',
};
const textStyle  = { fontSize: '15px', color: '#374151', lineHeight: '1.7' };
const buttonStyle = {
  backgroundColor: '#6366f1', color: '#ffffff',
  padding: '14px 28px', borderRadius: '8px',
  fontWeight: '600', fontSize: '15px', textDecoration: 'none',
};
const hrStyle    = { borderColor: '#e2e8f0', margin: '24px 0' };
const footerStyle = { fontSize: '13px', color: '#64748b' };

Template rendern mit Resend

Resend rendert React-Komponenten serverseitig — kein separater Build-Schritt nötig:

RENDER

// src/lib/send-welcome.ts
import { resend } from './email';
import WelcomeEmail from '../../emails/WelcomeEmail';
import { render } from '@react-email/render';

export async function sendWelcomeEmail(
  to: string,
  userName: string
) {
  const html = await render(
    WelcomeEmail({
      userName,
      courseUrl: 'https://agentic-movers.com/kurs',
      loginUrl:  'https://agentic-movers.com/login',
    })
  );

  return resend.emails.send({
    from:    'Agentic Movers <noreply@agentic-movers.com>',
    to:      [to],
    subject: `Willkommen, ${userName}!`,
    html,
  });
}

Preview-Server: Während der Entwicklung kannst du email dev aus dem @react-email/cli-Paket nutzen, um Templates live im Browser zu previewen — mit Hot-Reload und Desktop/Mobile-Ansicht. Claude Code erstellt dir auf Wunsch direkt das passende npm-Script.

3. Transaktionale E-Mail-Workflows

Transaktionale E-Mails werden durch Nutzeraktionen ausgelöst — Registrierung, Passwort-Reset, Bestellbestätigung. Das Muster ist immer gleich: Event → Trigger-Funktion → Resend-API. Claude Code hilft dabei, diese Flows sauber zu strukturieren und zu testen.

WORKFLOWS

Typische transaktionale E-Mail-Typen:

Willkommensmail — nach erfolgreicher Registrierung
E-Mail-Verifizierung — Double-Opt-In-Link mit Token
Passwort-Reset — zeitlich begrenzter One-Time-Link
Bestellbestätigung — Kaufdetails, Download-Link, Rechnung
Trial-Ablauf — 3/1 Tage vor Ende der Testphase
Onboarding-Sequenz — D+1, D+3, D+7 nach Registrierung

Passwort-Reset mit sicherem Token

RESET

// src/lib/send-password-reset.ts
import crypto from 'crypto';
import { resend } from './email';
import { render } from '@react-email/render';
import PasswordResetEmail from '../../emails/PasswordResetEmail';

const TOKEN_TTL_MS = 60 * 60 * 1000; // 1 Stunde

export async function sendPasswordReset(
  email: string,
  userId: string,
  db: DatabaseClient
): Promise<void> {
  const token  = crypto.randomBytes(32).toString('hex');
  const expiry = new Date(Date.now() + TOKEN_TTL_MS);

  // Token in DB speichern (hashed!)
  await db.passwordResets.upsert({
    userId,
    tokenHash: crypto.createHash('sha256').update(token).digest('hex'),
    expiresAt: expiry,
  });

  const resetUrl = `https://agentic-movers.com/reset?token=${token}`;

  const html = await render(PasswordResetEmail({ resetUrl }));

  await resend.emails.send({
    from:    'Agentic Movers <security@agentic-movers.com>',
    to:      [email],
    subject: 'Passwort zurücksetzen',
    html,
    tags: [{ name: 'category', value: 'password-reset' }],
  });
}

Bestellbestätigung mit Anhang

ORDER

// src/lib/send-order-confirmation.ts
import { resend } from './email';
import { render } from '@react-email/render';
import OrderConfirmEmail from '../../emails/OrderConfirmEmail';

interface OrderDetails {
  orderId:     string;
  customerName:string;
  product:     string;
  amount:      number;
  currency:    string;
  invoicePdf:  Buffer;
}

export async function sendOrderConfirmation(
  email: string,
  order: OrderDetails
) {
  const html = await render(OrderConfirmEmail({
    customerName: order.customerName,
    product:      order.product,
    amount:       order.amount,
    currency:     order.currency,
    orderId:      order.orderId,
  }));

  return resend.emails.send({
    from:    'Agentic Movers <orders@agentic-movers.com>',
    to:      [email],
    subject: `Bestellbestätigung #${order.orderId}`,
    html,
    attachments: [{
      filename:    `rechnung-${order.orderId}.pdf`,
      content:     order.invoicePdf,
      contentType: 'application/pdf',
    }],
    tags: [
      { name: 'category', value: 'order-confirmation' },
      { name: 'orderId',   value: order.orderId },
    ],
  });
}

Onboarding-Sequenz mit Queue

Für zeitverzögerte E-Mail-Sequenzen eignet sich eine Job-Queue (z.B. BullMQ, Inngest oder Trigger.dev). Claude Code generiert auf Anfrage die gesamte Queue-Integration:

QUEUE

// src/queues/onboarding.ts (Inngest-Beispiel)
import { inngest } from './client';
import { sendEmail } from '../lib/email';

export const onboardingSequence = inngest.createFunction(
  { id: 'onboarding-sequence' },
  { event: 'user.registered' },
  async ({ event, step }) => {
    const { email, name } = event.data;

    // Tag 1: Willkommens-E-Mail (sofort)
    await step.run('send-welcome', () =>
      sendEmail('welcome', email, { name })
    );

    // Tag 3: Erster Kurshinweis
    await step.sleep('wait-3-days', '3d');
    await step.run('send-day3', () =>
      sendEmail('onboarding-day3', email, { name })
    );

    // Tag 7: Trial-Erinnerung
    await step.sleep('wait-4-more-days', '4d');
    await step.run('send-day7', () =>
      sendEmail('trial-reminder', email, { name })
    );
  }
);

Rate Limits: Resend erlaubt im kostenlosen Plan 100 E-Mails/Tag. Paid-Pläne beginnen bei 50.000/Monat. Bei Onboarding-Sequenzen für viele Nutzer gleichzeitig (z.B. nach einem Launch) empfiehlt sich eine Queue mit Throttling, um Rate-Limit-Fehler (HTTP 429) zu vermeiden. Claude Code erkennt diese Situation und schlägt automatisch einen exponentiellen Backoff vor.

4. Webhooks & Delivery-Tracking

Resend sendet Webhooks für jeden relevanten E-Mail-Lifecycle-Event. Damit lassen sich Bounces erkennen, Beschwerden verarbeiten und Zustellprobleme automatisch behandeln. Claude Code generiert den kompletten Webhook-Handler inklusive Svix-Signaturverifizierung.

EVENTS

Resend Webhook-Events und ihre Bedeutung:

email.sent — E-Mail wurde an den Provider übergeben
email.delivered — Zustellung beim Empfänger-Mailserver bestätigt
email.delivery_delayed — Temporäre Zustellverzögerung (Soft Bounce)
email.bounced — Permanente Zustellfehler (Hard Bounce) → E-Mail-Adresse sperren
email.complained — Spam-Beschwerde → sofort aus allen Listen entfernen
email.opened — E-Mail wurde geöffnet (Tracking Pixel)
email.clicked — Link wurde angeklickt

Webhook-Endpoint mit Next.js

HANDLER

// app/api/webhooks/resend/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { Webhook } from 'svix';
import { db } from '@/lib/db';

export async function POST(req: NextRequest) {
  const secret = process.env.RESEND_WEBHOOK_SECRET!;
  const wh = new Webhook(secret);

  const headers = {
    'svix-id':        req.headers.get('svix-id') ?? '',
    'svix-timestamp': req.headers.get('svix-timestamp') ?? '',
    'svix-signature': req.headers.get('svix-signature') ?? '',
  };

  const body = await req.text();

  let event: ResendWebhookEvent;
  try {
    event = wh.verify(body, headers) as ResendWebhookEvent;
  } catch {
    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
  }

  switch (event.type) {
    case 'email.bounced':
      await db.emailAddresses.update({
        where: { email: event.data.to[0] },
        data:  { status: 'BOUNCED', bouncedAt: new Date() },
      });
      break;

    case 'email.complained':
      await db.emailAddresses.update({
        where: { email: event.data.to[0] },
        data:  { status: 'UNSUBSCRIBED', complainedAt: new Date() },
      });
      break;

    case 'email.delivered':
      await db.emailLogs.create({
        data: {
          emailId:     event.data.email_id,
          event:       'DELIVERED',
          occurredAt:  new Date(event.data.created_at),
        },
      });
      break;

    default:
      // Unbekannte Events ignorieren, 200 zurückgeben
      break;
  }

  return NextResponse.json({ received: true });
}

// Typ-Definitionen
interface ResendWebhookEvent {
  type: string;
  data: {
    email_id:   string;
    to:         string[];
    created_at: string;
  };
}

Bounce-Management-Strategie

Resend sperrt automatisch Hard-Bounce-Adressen nach dem ersten Bounce. Auf Anwendungsseite sollte die eigene Datenbank ebenfalls gepflegt werden, um keine weiteren Versuche zu unternehmen:

GUARD

// src/lib/email-guard.ts
import { db } from './db';

export async function canSendTo(email: string): Promise<boolean> {
  const record = await db.emailAddresses.findUnique({
    where:  { email },
    select: { status: true },
  });

  if (!record) return true;

  const blockedStatuses = ['BOUNCED', 'UNSUBSCRIBED', 'COMPLAINED'];
  return !blockedStatuses.includes(record.status);
}

Idempotenz: Webhook-Endpoints müssen idempotent sein — Resend kann Events mehrfach senden (at-least-once delivery). Nutze svix-id als Deduplication-Key in der Datenbank, um doppelte Verarbeitungen zu verhindern. Claude Code fügt diesen Guard automatisch ein, wenn du "idempotenten Webhook-Handler" anforderst.

5. Audiences & Broadcasts

Seit Version 3.x bietet Resend auch Audience-Management für Newsletter und Broadcasts — direkt über die gleiche API. Für Produktupdates, Launch-Ankündigungen und kurze Broadcast-Kampagnen ist das eine elegante Alternative zu separaten Newsletter-Tools.

AUDIENCE

// src/lib/audiences.ts
import { resend } from './email';

// Audience erstellen (einmalig)
export async function createAudience(name: string) {
  const { data, error } = await resend.audiences.create({ name });
  if (error) throw new Error(error.message);
  return data!.id;
}

// Kontakt zu Audience hinzufügen
export async function addContact(
  audienceId: string,
  contact: {
    email:     string;
    firstName: string;
    lastName?: string;
    unsubscribed?: boolean;
  }
) {
  const { data, error } = await resend.contacts.create({
    audienceId,
    email:        contact.email,
    firstName:    contact.firstName,
    lastName:     contact.lastName,
    unsubscribed: contact.unsubscribed ?? false,
  });
  if (error) throw new Error(error.message);
  return data!.id;
}

// Kontakt abmelden (GDPR-konform)
export async function unsubscribeContact(
  audienceId: string,
  contactId: string
) {
  return resend.contacts.update({
    audienceId,
    id:           contactId,
    unsubscribed: true,
  });
}

Broadcast senden

BROADCAST

// src/lib/send-broadcast.ts
import { resend } from './email';
import { render } from '@react-email/render';
import NewsletterEmail from '../../emails/NewsletterEmail';

export async function sendBroadcast({
  audienceId,
  subject,
  previewText,
  content,
}: {
  audienceId:  string;
  subject:     string;
  previewText: string;
  content:     string;
}) {
  const html = await render(NewsletterEmail({ content, previewText }));

  const { data, error } = await resend.broadcasts.create({
    audienceId,
    from:    'Agentic Movers <newsletter@agentic-movers.com>',
    subject,
    html,
    replyTo: 'daniel@agentic-movers.com',
  });

  if (error) throw new Error(error.message);

  // Broadcast sofort senden
  await resend.broadcasts.send(data!.id);
  return data!.id;
}

Unsubscribe-Handling (DSGVO-konform)

Resend fügt automatisch einen Unsubscribe-Header ein, wenn die E-Mail mit einer Audience verknüpft ist. Für zusätzliche Kontrolle kann ein eigener Unsubscribe-Endpoint implementiert werden:

UNSUB

// app/api/unsubscribe/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { resend } from '@/lib/email';
import { db } from '@/lib/db';

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const token      = searchParams.get('token');
  const audienceId = searchParams.get('audience');

  if (!token || !audienceId) {
    return NextResponse.json({ error: 'Ungültiger Link' }, { status: 400 });
  }

  // Token in DB auflösen → contactId + email
  const record = await db.unsubscribeTokens.findUnique({
    where: { token },
  });

  if (!record) {
    return NextResponse.redirect('https://agentic-movers.com/unsubscribed?error=1');
  }

  // In Resend als unsubscribed markieren
  await resend.contacts.update({
    audienceId,
    id:           record.contactId,
    unsubscribed: true,
  });

  // In eigener DB markieren
  await db.emailAddresses.update({
    where: { email: record.email },
    data:  { status: 'UNSUBSCRIBED' },
  });

  return NextResponse.redirect('https://agentic-movers.com/unsubscribed');
}

DSGVO-Hinweis: Jeder Newsletter muss einen funktionierenden Abmeldelink enthalten. Resend setzt automatisch einen List-Unsubscribe-Header, wenn eine audienceId angegeben wird. Das verbessert auch die Deliverability, da moderne Mailclients (Gmail, Outlook) diesen Header für den "Abmelden"-Button nutzen.

6. DNS-Setup & Deliverability

Ohne korrekte DNS-Konfiguration landet selbst die schönste E-Mail im Spam. Resend führt durch den gesamten Setup-Prozess — die eigentliche Herausforderung ist das Verständnis der einzelnen Records und ihre Wechselwirkung. Claude Code erklärt auf Anfrage jeden Record im Detail und prüft die Konfiguration.

Benötigte DNS-Records

DNS

Typ	Name	Wert	Zweck
TXT	@	v=spf1 include:amazonses.com ~all	SPF — authorisierte Absender
TXT	_dmarc	v=DMARC1; p=quarantine; rua=mailto:dmarc@agentic-movers.com	DMARC — Policy für Fehlschläge
CNAME	resend._domainkey	resend._domainkey.send.resend.com	DKIM — Signaturverifizierung
CNAME	em	feedback.amazonses.com	Bounce- & Beschwerde-Tracking
MX	bounces	feedback-smtp.eu-west-1.amazonses.com	Bounce-Mail-Handling (EU-Region)

Domain-Verifikation mit Resend CLI

VERIFY

# Domain in Resend hinzufügen
resend domains add agentic-movers.com

# DNS-Records abrufen (für Copy-Paste ins DNS-Panel)
resend domains get <domain-id>

# Verifizierungsstatus prüfen
resend domains verify <domain-id>

Programmatische Domain-Verifikation

API

// src/scripts/setup-domain.ts
import { resend } from '../lib/email';

async function setupDomain() {
  // Domain registrieren
  const { data: domain, error: createErr } =
    await resend.domains.create({
      name:   'agentic-movers.com',
      region: 'eu-west-1', // EU-DSGVO-konform
    });

  if (createErr) throw createErr;

  console.log('Domain-ID:', domain!.id);
  console.log('DNS-Records die gesetzt werden müssen:');
  console.log(JSON.stringify(domain!.records, null, 2));

  // Auf Verifikation warten (polling)
  let verified = false;
  let attempts = 0;

  while (!verified && attempts < 20) {
    await new Promise(r => setTimeout(r, 30_000)); // 30s warten
    attempts++;

    const { data: status } = await resend.domains.get(domain!.id);
    console.log(`Versuch ${attempts}: ${status!.status}`);

    if (status!.status === 'verified') {
      verified = true;
      console.log('✓ Domain erfolgreich verifiziert!');
    }
  }

  if (!verified) {
    console.error('Domain-Verifikation nach 10 Minuten fehlgeschlagen.');
    console.error('DNS-Propagation kann bis zu 48h dauern.');
  }
}

setupDomain();

From-Adresse Best Practices

BEST PRACTICE

Transaktional vs. Marketing trennen: noreply@ oder orders@ für transaktionale E-Mails, newsletter@ für Broadcasts
Display-Name nutzen: Agentic Movers <noreply@agentic-movers.com> statt reiner E-Mail-Adresse
reply-to setzen: Auch wenn From noreply@ ist, sollte replyTo auf eine echte Adresse zeigen
Subdomain für Marketing: news.agentic-movers.com für Newsletter schützt die Hauptdomain-Reputation
Kein free-provider: Niemals Gmail, Outlook etc. als From-Adresse — SPF/DKIM schlägt fehl

Domain-Warmup-Strategie

Neue Domains müssen schrittweise aufgewärmt werden, um nicht als Spam eingestuft zu werden. Resend empfiehlt folgenden Zeitplan:

WARMUP

Woche	Max. E-Mails/Tag	Fokus
Woche 1	50–100	Nur engaged Empfänger (bekannte Adressen)
Woche 2	200–500	Opt-in Liste, transaktionale E-Mails priorisieren
Woche 3	1.000–2.000	Erweitern auf gesamte verifizierte Liste
Ab Woche 4	unbegrenzt (planabhängig)	Normale Betriebsvolumen

Deliverability-Monitoring

Resend bietet ein Dashboard mit Delivery-Rates, Bounce-Rates und Complaint-Rates. Als Faustregeln gelten:

METRIKEN

Bounce-Rate: unter 2% halten — ab 5% drohen Senderbeschränkungen
Complaint-Rate: unter 0.1% — Google/Yahoo fordern das seit 2024
Open-Rate: Richtwert über 20% für transaktionale, 15%+ für Newsletter
Hard Bounces: sofort aus Liste entfernen (automatisch via Webhook)
Soft Bounces: nach 3 Versuchen wie Hard Bounce behandeln

Claude Code Prompt für DNS-Debugging: "Meine E-Mails landen im Spam. Prüfe meine SPF, DKIM und DMARC Konfiguration für die Domain agentic-movers.com und erkläre, was falsch eingestellt sein könnte." Claude Code führt dann einen strukturierten DNS-Check durch und gibt konkrete Verbesserungsvorschläge — inklusive fertig formatierter DNS-Records zum Copy-Pasten.

Vollständiges TypeScript-Typsystem für Resend

Für größere Projekte lohnt sich ein zentrales Typsystem für alle E-Mail-Funktionen:

TYPES

// src/types/email.ts
export type EmailCategory =
  | 'welcome'
  | 'password-reset'
  | 'order-confirmation'
  | 'trial-reminder'
  | 'onboarding-day3'
  | 'newsletter';

export interface SendEmailResult {
  success: boolean;
  emailId?: string;
  error?:   string;
}

export interface EmailTemplate<TProps> {
  subject: (props: TProps) => string;
  render:  (props: TProps) => Promise<string>;
}

export type EmailRegistry = {
  [K in EmailCategory]: EmailTemplate<any>;
};

// Factory-Pattern für einheitliche E-Mail-Erstellung
export async function createEmailFactory(
  category: EmailCategory,
  props: unknown
): Promise<{ subject: string; html: string }> {
  const registry = await import('./email-registry');
  const template = registry.default[category];

  return {
    subject: template.subject(props),
    html:    await template.render(props),
  };
}

Mit diesem Factory-Pattern lässt sich jede E-Mail über eine einzige Funktion createEmailFactory(category, props) generieren. Claude Code erweitert das Pattern auf Wunsch um Internationalisierung (i18n), A/B-Testing und Vorschau-URLs.

Zusammenfassung

Resend + React Email + TypeScript bilden einen extrem produktiven Stack für transaktionale E-Mails. Die API ist konsistent, die TypeScript-Typen vollständig, und Claude Code kann nahezu jeden Aspekt — von Template-Entwicklung über Webhook-Handler bis zu DNS-Records — on-demand generieren. Kritische Erfolgsfaktoren sind korrekte DNS-Konfiguration, sauberes Bounce-Management und ein strukturierter Warmup-Prozess.

E-Mail-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiges Resend-Modul mit React Email Templates, Webhooks, Audiences und DNS-Deliverability für transaktionale E-Mails.

14 Tage kostenlos testen →