⚡Backend

E-Mail Versand einrichten (Resend)

Transaktionale E-Mails mit Resend und React Email

E-Mails versenden klingt nach SMTP-Hoelle. Resend macht es so einfach wie einen API-Call. Kombiniert mit React Email baust du E-Mail-Templates wie React-Komponenten.

Pro-Tip — Der schnelle Weg

Nutze React Email zum Bauen deiner Templates. Du schreibst JSX statt HTML-Tabellen und bekommst trotzdem kompatible E-Mails fuer alle Clients.

Seite 1

Resend installieren und Key holen

Erstelle einen Account auf resend.com und hole dir deinen API-Key.

npm install resend

# .env.local
RESEND_API_KEY=re_...

E-Mail API-Route erstellen

Eine einfache Route die eine E-Mail versendet.

// app/api/send-email/route.ts
import { Resend } from "resend";
import { NextResponse } from "next/server";

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

export async function POST(req: Request) {
const { to, name } = await req.json();

const { data, error } = await resend.emails.send({
from: "Dein Name <noreply@deinedomain.de>",
to: [to],
subject: "Willkommen!",
html: `<h1>Hallo ${name}!</h1><p>Danke fuer deine Anmeldung.</p>`,
});

if (error) return NextResponse.json({ error }, { status: 400 });
return NextResponse.json({ id: data?.id });
}

React Email Template bauen

Fuer schoenere E-Mails installiere React Email und baue Templates als Komponenten.

npm install @react-email/components

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

export default function WelcomeEmail({ name }: { name: string }) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "sans-serif", background: "#f4f4f5" }}>
<Container style={{ maxWidth: 480, margin: "0 auto", padding: 24 }}>
<Text style={{ fontSize: 24, fontWeight: "bold" }}>Hallo {name}!</Text>
<Text>Danke fuer deine Anmeldung. Hier ist dein Zugang:</Text>
<Button
href="https://deinedomain.de/login"
style={{ background: "#2563eb", color: "#fff", padding: "12px 24px", borderRadius: 8 }}
>
Zum Login
</Button>
</Container>
</Body>
</Html>
);
}

Template in der Route verwenden

Ersetze den HTML-String durch deine React Email Komponente.

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

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

await resend.emails.send({
from: "Dein Name <noreply@deinedomain.de>",
to: [to],
subject: "Willkommen!",
html,
});

Seite 2

Warum das funktioniert

Resend ist in 2 Minuten eingerichtet -- kein SMTP, kein Postfix, kein Stress
React Email Templates sind wiederverwendbar und versionierbar wie normaler Code
HTML-E-Mail Kompatibilitaet wird von der Library gehandled, nicht von dir

Tipps

Resend bietet 3.000 kostenlose E-Mails pro Monat -- reicht fuer den Start
Verifiziere deine Domain in Resend fuer bessere Zustellbarkeit
Nutze npx react-email dev um deine Templates im Browser zu previewen

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