⚡E-Mail

Resend für transaktionale E-Mails

Schöne E-Mails mit React-Komponenten — April 2026

Vergiss SMTP-Konfiguration und HTML-Tabellen für E-Mails. Resend lässt dich transaktionale E-Mails mit React-Komponenten bauen — genau wie dein Frontend. Willkommens-Mail, Passwort-Reset, Bestellbestätigung: alles in JSX.

Pro-Tip — Der schnelle Weg
Nutze react-email zusammen mit Resend — du baust deine Mail-Templates als React-Komponenten und siehst live die Vorschau im Browser.
Seite 1
01

Resend und React Email installieren

Installiere beide Pakete und erstell dein erstes E-Mail-Template als React-Komponente.

npm install resend @react-email/components


# E-Mail Templates Ordner erstellen:
mkdir -p emails
02

E-Mail-Template als React-Komponente

Erstelle eine Willkommens-Mail mit echten React-Komponenten statt HTML-Tabellen.

// emails/welcome.tsx
import { Html, Head, Body, Container, Text, Button } from "@react-email/components";


export default function WelcomeMail({ name }: { name: string }) {
 return (
 <Html>
 <Head />
 <Body style={{ fontFamily: "sans-serif" }}>
 <Container>
 <Text>Hallo {name}, willkommen!</Text>
 <Button href="https://deine-app.de/start"
 style={{ background: "#000", color: "#fff", padding: "12px 24px" }}>
 Jetzt starten
 </Button>
 </Container>
 </Body>
 </Html>
 );
}
03

E-Mail senden per API Route

In deiner Next.js API Route schickst du die Mail mit einer einzigen Funktion ab.

// app/api/send/route.ts
import { Resend } from "resend";
import WelcomeMail from "@/emails/welcome";


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


export async function POST(req: Request) {
 const { email, name } = await req.json();
 const { error } = await resend.emails.send({
 from: "App <noreply@deine-domain.de>",
 to: email,
 subject: "Willkommen!",
 react: WelcomeMail({ name }),
 });
 if (error) return Response.json({ error }, { status: 500 });
 return Response.json({ success: true });
}
Seite 2
Warum das funktioniert
  • React-Komponenten statt HTML-Tabellen — endlich E-Mails wie normales Frontend
  • Eine einzige send-Funktion statt SMTP-Konfiguration und Transporter-Setup
  • TypeScript-Support: Tippfehler in E-Mail-Templates werden beim Build erkannt
  • Live-Vorschau im Browser statt test-send-check-repeat Zyklus
Tipps
  • 3.000 E-Mails pro Monat sind kostenlos — reicht für den Start locker
  • Nutze den react-email Dev-Server für Live-Vorschau deiner Templates
  • Eigene Domain verifizieren für bessere Zustellrate statt der Resend-Subdomain
  • Resend hat ein eingebautes Dashboard für Zustellstatus und Bounce-Tracking
  • Kombiniere mit Supabase Auth Hooks für automatische Willkommens-Mails
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen