Next.js + Resend Tutorial: E-Mail-Einrichtung und -Testing

Hi, hier ist Hoda!

Ich habe kürzlich ein Authentifizierungssystem mit Next.js und Resend gebaut. Das Ganze dient teilweise auch als Notiz für mein zukünftiges Ich, weshalb ich meine Einrichtung hier zusammengefasst habe.

Was ist Resend?

Kurz gesagt ist Resend "an email-sending API built for developers.". Verglichen mit herkömmlichen E-Mail-Versanddiensten ist es darauf ausgelegt, Entwicklern das Hinzufügen von E-Mail-Funktionen zu modernen Anwendungen – Web-Apps, Mobile-Apps und so weiter – deutlich zu erleichtern.

Resend unterstützt eine Vielzahl von Sprachen und Frameworks, sodass du direkt in Umgebungen wie den folgenden starten kannst:

• JavaScript/TypeScript: Node.js, Next.js, React, Express und mehr
• Andere Sprachen: Python, PHP (Laravel), Ruby (Rails), Go, Rust, Elixir, Java, .NET und mehr

Was du mit Resend tun kannst

Resend ist nicht nur zum Versenden von E-Mails da – es bringt einige wirklich nützliche Funktionen für die Entwicklung mit.

• Sichtbarkeit und Verwaltung: Du kannst den detaillierten Status jeder gesendeten E-Mail (gesendet, geöffnet, geklickt, gebounced usw.) direkt im Dashboard einsehen.
• Domain-Zustellbarkeitsmanagement: Authentifiziere deine eigene Domain, damit deine E-Mails zuverlässig im Posteingang des Empfängers landen.
• React-basierte Vorlagen: Du kannst das HTML deiner E-Mail mit React-Komponenten erstellen, was es zu einer natürlichen Wahl für Frontend-Entwickler macht.
• Team-Sharing: Du kannst den Inhalt einer gesendeten E-Mail als öffentlichen Link mit Teammitgliedern teilen, der 48 Stunden lang ohne Authentifizierung einsehbar ist.

Die grundlegenden Schritte für den Einstieg

Hier ist der allgemeine Ablauf, um Resend zu einem Projekt hinzuzufügen.

1. Voraussetzungen

Erstelle zuerst ein Konto auf der offiziellen Website und kümmere dich um zwei Dinge:

• Einen API-Schlüssel erstellen: Gib einen Authentifizierungsschlüssel aus, damit deine Anwendung Resend aufrufen kann.
• Eine Domain verifizieren: Richte die Dinge so ein, dass du E-Mails von einer Domain senden kannst, die dir gehört.

2. SDK installieren

Für eine Node.js-Umgebung installierst du das SDK beispielsweise mit:

npm install resend

3. Die grundlegende Implementierung

Der einfachste denkbare Versand (für etwas wie Next.js) sieht so aus. Setze deinen API-Schlüssel als Umgebungsvariable und rufe einfach die Methode resend.emails.send auf.

import { Resend } from 'resend';

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

await resend.emails.send({
  from: 'you@yourdomain.com',
  to: 'recipient@example.com',
  subject: 'Hello World',
  html: '<p>This is my first email from Resend!</p>'
});

Ein „Testversand“-Tipp, den man früh kennen sollte

Wenn du während der Entwicklung wiederholt an echte E-Mail-Adressen sendest, kann der Ruf deiner Domain Schaden nehmen, was das Risiko erhöht, dass deine E-Mails später als Spam eingestuft werden.

Um das zu vermeiden, bietet Resend dedizierte Testadressen an, mit denen du verschiedene Szenarien simulieren kannst, ohne den Ruf deiner Domain zu gefährden.

• Erfolgreichen Versand testen: Sende an delivered@resend.dev.
• Bounce testen: Sende an bounced@resend.dev.
• Als Spam markiert testen: Sende an complained@resend.dev.

Die Verwendung dieser Adressen ermöglicht es dir, sicher zu entwickeln, ohne deine Produktionsumgebung zu verschmutzen.

Wenn ich Resend in einem Bild beschreiben müsste, ist es wie ein smarter internationaler Schalter für den Paketversand. Du musst dich nicht mit den alten, komplizierten Abläufen auskennen (selbst einen Mailserver konfigurieren) – du gibst einfach die Adresse und die Nachricht ab, und Resend kümmert sich um die zuverlässige Weiterleitung, während es dir in Echtzeit genau anzeigt, wo sich dein Paket gerade befindet.

Resend zu einem Next.js-Projekt hinzufügen

1. Voraussetzungen

Bevor du mit der Implementierung beginnst, erledige zwei Dinge im Resend-Dashboard:

• Einen API-Schlüssel erstellen: Hole dir den Schlüssel, den deine App zur Authentifizierung verwenden wird.
• Eine Domain verifizieren: Registriere und verifiziere die Domain, von der aus du senden wirst.

Übrigens ermöglicht dir selbst der kostenlose Tarif den Versand von 3.000 transaktionalen E-Mails pro Monat, was für ein kleineres Projekt mehr als ausreichend ist.

2. SDK installieren

Führe als Erstes den folgenden Befehl im Stammverzeichnis deines Projekts aus, um das Resend Node.js SDK zu installieren:

npm install resend

3. Eine E-Mail-Vorlage erstellen

Was Resend auszeichnet, ist die Tatsache, dass du React-Komponenten direkt als deine E-Mail-Vorlagen verwenden kannst. Erstelle beispielsweise eine Datei namens components/email-template.tsx mit etwa folgendem Inhalt:

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

4. Versandlogik implementieren (API-Route)

Erstelle als Nächstes einen API-Endpunkt, um die E-Mail tatsächlich zu versenden. Wenn du den App Router verwendest, erstelle ihn unter app/api/send/route.ts (für den Pages Router verwende pages/api/send.ts).

Hier initialisieren wir Resend mithilfe der Umgebungsvariablen RESEND_API_KEY und senden eine E-Mail unter Verwendung der von uns gerade erst erstellten Vorlage.

import { EmailTemplate } from '../../../components/EmailTemplate';
import { Resend } from 'resend';

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

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>', // your verified domain
      to: ['delivered@resend.dev'],       // recipient
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }), // using the React template
    });

    if (error) {
      return Response.json({ error }, { status: 500 });
    }

    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

5. Sendestatus überprüfen und testen

Du kannst direkt im Resend-Dashboard detailliert überprüfen, wie eine von Next.js gesendete E-Mail tatsächlich angekommen ist.

• E-Mail-Ereignisse nachverfolgen: Verfolge das Protokoll, um zu sehen, ob eine gesendete E-Mail „gesendet“ (sent), „zugestellt“ (delivered) oder „gebounced“ (bounced – vom Server des Empfängers abgelehnt) wurde.
• Testadressen verwenden: Während der Entwicklung empfiehlt es sich, das Verhalten anhand der folgenden Testadressen zu überprüfen, anstatt deine eigene E-Mail-Adresse zu verwenden.
  • Erfolgstest: Sende an delivered@resend.dev, um zu sehen, wie sich das System bei einer erfolgreichen Zustellung verhält.
  • Bounce-Test: Sende an bounced@resend.dev, um zu testen, wie deine Fehlerbehandlung reagiert.

Wenn ich beschreiben müsste, wie sich das in Next.js einrichtet, ist es, als würdest du eine dedizierte Lieferlinie aus der Rückseite deines Ladens betreiben.

Du verfasst den Brief mit einem Werkzeug, das du bereits bestens kennst – React-Komponenten – und speist ihn in Resends dedizierte Lieferlinie (das SDK/die API) ein. Von dort aus wird er automatisch überall auf der Welt zugestellt, und du erhältst eine Echtzeit-Empfangsbestätigung, dass er sicher angekommen ist. Genau das ist die Art von reibungslosem System, die am Ende dabei herauskommt.