Blog
Standpunkt

So verwenden Sie die Resend-API (Einsteiger-Leitfaden)

E-Mail ist essenziell für Web-Apps. Resend vereinfacht das Senden von Transaktions- & Marketing-E-Mails mit APIs & Analysen.

Leo Schulz

Leo Schulz

5 June 2025

So verwenden Sie die Resend-API (Einsteiger-Leitfaden)

E-Mail ist eine kritische Komponente moderner Webanwendungen, die für alles verwendet wird, von der Benutzeranmeldung und Benachrichtigungen bis hin zu Passwort-Rücksetzungen und Marketingkampagnen. Der Aufbau und die Verwaltung einer zuverlässigen E-Mail-Versandinfrastruktur kann jedoch komplex und zeitaufwändig sein. Hier kommen E-Mail-API-Dienste wie Resend ins Spiel.

Resend bietet eine entwicklerfreundliche Plattform, die den Prozess des Versendens von Transaktions- und Marketing-E-Mails vereinfachen soll. Es bietet robuste APIs, detaillierte Analysen und eine hervorragende Zustellbarkeit, sodass sich Entwickler auf den Aufbau ihrer Anwendungen konzentrieren können, anstatt sich um die E-Mail-Infrastruktur kümmern zu müssen.

Dieser umfassende Leitfaden führt Sie durch alles, was Sie wissen müssen, um mit der Resend-API zu beginnen, vom Verständnis ihrer Kernkonzepte und Preise bis hin zur Integration in verschiedene beliebte Frameworks und Plattformen.

💡
Want a great API Testing tool that generates beautiful API Documentation?

Want an integrated, All-in-One platform for your Developer Team to work together with maximum productivity?

Apidog delivers all your demans, and replaces Postman at a much more affordable price!
button

Was ist Resend?

Resend ist eine E-Mail-API-Plattform, die für Entwickler entwickelt wurde. Ziel ist es, im Vergleich zu älteren E-Mail-Dienstanbietern (ESPs) ein besseres Entwicklererlebnis zu bieten. Zu den wichtigsten Funktionen gehören:

Resend positioniert sich als eine modernere, entwicklerorientierte Alternative zu etablierten Akteuren wie SendGrid, Mailgun oder AWS SES und konzentriert sich auf Benutzerfreundlichkeit, Zuverlässigkeit und die gute Integration in moderne Webentwicklungs-Workflows.

Wie ist die Preisgestaltung von Resend?

Resend bietet eine gestaffelte Preisstruktur, die auf der Anzahl der pro Monat gesendeten E-Mails basiert, mit separaten Überlegungen für Transaktions- und Marketing-E-Mails (obwohl die Preisseite in erster Linie Transaktionspläne detailliert beschreibt).

Hier ist eine Aufschlüsselung ihrer Transaktions-E-Mail-Pläne (zum Zeitpunkt des Verfassens):

Free Plan:

Pro Plan:

Scale Plan:

Enterprise Plan:

Wichtige Überlegungen:

Der Free Plan ist großzügig genug für kleine Projekte oder Testzwecke. Die Pro- und Scale-Pläne richten sich an wachsende Anwendungen mit steigenden E-Mail-Volumina und Funktionsanforderungen. Der Enterprise-Plan bietet maßgeschneiderte Lösungen für groß angelegte Operationen.

Erste Schritte mit Resend

Bevor Sie E-Mails senden können, müssen Sie Ihr Resend-Konto einrichten und Ihre Versanddomäne konfigurieren.

1. Registrieren und API-Schlüssel erstellen

2. Überprüfen Sie Ihre Domain

Um E-Mails zu senden, die professionell aussehen und Spam-Filter vermeiden, müssen Sie eine Domain verifizieren, die Ihnen gehört. Das Senden von nicht verifizierten Domains oder Standardadressen wie onboarding@resend.dev ist nur für erste Tests geeignet.

3. Test-E-Mails senden

Während der Entwicklung ist es entscheidend, das Senden von E-Mails zu testen, ohne den Ruf Ihrer Domain zu beeinträchtigen oder versehentlich an echte Benutzer zu senden. Resend stellt spezielle E-Mail-Adressen zum Testen verschiedener Szenarien bereit:

Mithilfe dieser Testadressen können Sie Ihre Integration überprüfen und Webhook-Handler für Bounce- und Beschwerdeereignisse sicher testen.

Integration von Resend mit Frameworks

Resend bietet offizielle SDKs und unkomplizierte Integrationsmethoden für verschiedene Sprachen und Frameworks. Wir werden einige beliebte Beispiele basierend auf der bereitgestellten Dokumentation behandeln. Das Kernkonzept beinhaltet in der Regel:

  1. Installieren des Resend SDK (falls verfügbar) oder Verwenden von Standard-HTTP-Anforderungen.
  2. Initialisieren des Resend-Clients mit Ihrem API-Schlüssel (sicher geladen, normalerweise aus Umgebungsvariablen).
  3. Aufrufen der Methode emails.send (oder einer entsprechenden Methode) mit Parametern wie from, to, subject und html oder react.

Senden mit Next.js

Next.js ist ein beliebtes React-Framework. Resend lässt sich gut integrieren, insbesondere mit React Email.

1. Installieren:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. E-Mail-Vorlage erstellen (optional, aber empfohlen): Verwenden Sie React Email oder erstellen Sie eine einfache React-Komponente für Ihren E-Mail-Text.

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

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

3. API-Route erstellen: Erstellen Sie einen API-Routenhändler, um die E-Mail zu senden.

// app/api/send/route.ts (App Router Example)
import { EmailTemplate } from '../../../components/email-template'; // Adjust path if needed
import { Resend } from 'resend';

// Ensure RESEND_API_KEY is set in your .env.local
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>', // Use your verified domain
      to: ['delivered@resend.dev'], // Replace with recipient or test address
      subject: 'Hello from Resend and Next.js!',
      react: EmailTemplate({ firstName: 'Test' }), // Pass props to your template
      // Alternatively, use `html`:
      // html: '<strong>It works!</strong>'
    });

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

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

// pages/api/send.ts (Pages Router Example - adapt imports/response)
// import type { NextApiRequest, NextApiResponse } from 'next';
// import { EmailTemplate } from '../../components/EmailTemplate';
// import { Resend } from 'resend';
//
// const resend = new Resend(process.env.RESEND_API_KEY);
//
// export default async (req: NextApiRequest, res: NextApiResponse) => {
//   try { // Added try...catch for better error handling
//     const { data, error } = await resend.emails.send({
//       from: 'Your Name <you@yourverifieddomain.com>',
//       to: ['delivered@resend.dev'],
//       subject: 'Hello world',
//       react: EmailTemplate({ firstName: 'John' }),
//     });
//
//     if (error) {
//       return res.status(400).json(error);
//     }
//
//     res.status(200).json(data);
//   } catch (e) {
//      res.status(500).json({ error: 'Internal Server Error' });
//   }
// };

4. Auslösen: Rufen Sie diesen API-Endpunkt von Ihrem Frontend aus (z. B. nach einer Formularübermittlung) mithilfe von fetch oder einer Bibliothek wie axios auf. Denken Sie daran, Platzhalterwerte durch Ihre tatsächliche verifizierte Domain und Empfängerlisten zu ersetzen.

Senden mit Astro

Astro ist ein moderner statischer Site-Builder, der auch serverseitiges Rendering (SSR) unterstützt.

1. Resend installieren:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. SSR-Adapter installieren: Astro benötigt einen SSR-Adapter, um serverseitigen Code bei Bedarf auszuführen. Installieren Sie einen, der für Ihr Bereitstellungsziel geeignet ist (z. B. @astrojs/node, @astrojs/vercel, @astrojs/cloudflare).

npx astro add node # Example for Node.js adapter

Befolgen Sie die Einrichtungsanweisungen des Adapters in Ihrer astro.config.mjs.

3. API-Schlüssel hinzufügen: Speichern Sie Ihren RESEND_API_KEY in Ihrer .env-Datei.

4. Astro-Aktion erstellen: Verwenden Sie Astro-Aktionen (experimentelles Feature zum Zeitpunkt des Schreibens, überprüfen Sie die Astro-Dokumente auf den aktuellen Status) oder Standard-API-Endpunkte.

// src/actions/index.ts (Using Astro Actions)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';

// Ensure RESEND_API_KEY is available via import.meta.env
const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  send: defineAction({
    // Example: Define input validation if needed
    // input: z.object({ email: z.string().email() }),
    handler: async (/* { email } - if using input */) => {
      try { // Added try...catch
        const { data, error } = await resend.emails.send({
          from: 'Your Name <you@yourverifieddomain.com>',
          to: ['delivered@resend.dev'], // Replace with recipient
          subject: 'Hello from Resend and Astro!',
          html: '<strong>Astro works!</strong>',
          // You can also use React templates if you set up React in Astro
          // react: <YourAstroCompatibleReactEmail firstName="Astro" />
        });

        if (error) {
          console.error("Resend Error:", error); // Log error
          // Throwing ActionError helps Astro handle errors gracefully
          throw new ActionError({
            code: 'BAD_REQUEST', // Or be more specific based on error
            message: error.message || 'Failed to send email',
          });
        }

        return data; // Return success data
      } catch (e) {
         console.error("Handler Error:", e);
         // Re-throw or throw a new ActionError
         throw new ActionError({
             code: 'INTERNAL_SERVER_ERROR',
             message: 'An unexpected error occurred.',
         });
      }
    },
  }),
};

// Alternative: API Endpoint (e.g., src/pages/api/send.ts)
// import type { APIRoute } from 'astro';
// import { Resend } from 'resend';
//
// const resend = new Resend(import.meta.env.RESEND_API_KEY);
//
// export const POST: APIRoute = async ({ request }) => {
//   // const body = await request.json(); // If data comes from request body
//   try {
//     const { data, error } = await resend.emails.send({ /* ... email params ... */ });
//     if (error) {
//       return new Response(JSON.stringify(error), { status: 400 });
//     }
//     return new Response(JSON.stringify(data), { status: 200 });
//   } catch (e) {
//     return new Response(JSON.stringify({ message: "Server Error"}), { status: 500 });
//   }
// }

5. Auslösen: Rufen Sie die Aktion oder den Endpunkt von Ihren Astro-Komponenten oder -Seiten aus auf, typischerweise innerhalb eines Formularübermittlungshandlers.

Senden mit Bun

Bun ist eine schnelle JavaScript-Laufzeitumgebung mit einem integrierten Bundler, Transpiler, Task Runner und npm-Client.

1. Installieren:

bun install resend

2. E-Mail-Vorlage erstellen (optional): Ähnlich wie bei Next.js können Sie eine .tsx-Datei für Ihre React-E-Mail-Vorlage erstellen.

// email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

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

3. Bun-Server-Skript erstellen: Erstellen Sie ein Skript (z. B. index.tsx), um einen einfachen HTTP-Server mit Bun auszuführen.

// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // Assuming it's in the same dir

// Load API key from environment variables
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
  console.error("Error: RESEND_API_KEY environment variable not set.");
  process.exit(1); // Exit if key is missing
}
const resend = new Resend(resendApiKey);

const server = Bun.serve({
  port: 3000,
  async fetch(req) { // Added 'req' argument
    // Optional: Check request method, path, etc.
    // if (new URL(req.url).pathname !== '/send') {
    //   return new Response("Not Found", { status: 404 });
    // }
    // if (req.method !== 'POST') {
    //    return new Response("Method Not Allowed", { status: 405 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Your Name <you@yourverifieddomain.com>',
        to: ['delivered@resend.dev'],
        subject: 'Hello from Resend and Bun!',
        react: EmailTemplate({ firstName: 'Bun User' }),
        // Or use html: '<strong>Bun works!</strong>'
      });

      if (error) {
        console.error("Resend Error:", error);
        // Return a proper JSON error response
        return new Response(JSON.stringify({ error: error.message || 'Failed to send email' }), {
          status: 500, // Or 400 depending on error type
          headers: { 'Content-Type': 'application/json' },
        });
      }

      // Return success response
      return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      });

    } catch (e) {
        console.error("Server Error:", e);
        return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
        });
    }
  },
  error(error) { // Added basic error handler for the server itself
      return new Response(`<pre>${error}\\\\\\\\n${error.stack}</pre>`, {
          headers: { "Content-Type": "text/html" },
      });
  },
});

console.log(`Listening on <http://localhost>:${server.port} ...`);

4. Ausführen: Starten Sie den Server mit RESEND_API_KEY=your_api_key bun run index.tsx. Der Zugriff auf http://localhost:3000 (oder das Auslösen der von Ihnen definierten spezifischen Route/Methode) sendet die E-Mail.

Senden mit Nuxt

Nuxt ist ein beliebtes Vue.js-Framework.

1. Installieren:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. Server-Route erstellen: Nuxt verwendet ein server/-Verzeichnis für die Backend-Logik. Erstellen Sie eine Datei wie server/api/send.post.ts (das .post gibt an, dass sie POST-Anforderungen verarbeitet).

// server/api/send.post.ts
import { Resend } from 'resend';

// Access API Key securely (e.g., via runtimeConfig in nuxt.config.ts)
// See: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // Assuming key is set in runtime config

export default defineEventHandler(async (event) => {
  // Optional: Read body if data comes from request
  // const body = await readBody(event);

  try {
    const data = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend and Nuxt!',
      html: '<strong>Nuxt works!</strong>',
      // You can integrate Vue email templates (e.g., using vue-email)
      // See: <https://github.com/Dave136/vue-email>
    });

    // Nuxt 3 automatically handles returning the data as JSON
    return data;

  } catch (error: any) { // Catch specific error types if possible
    console.error("Resend Error:", error);
    // Throw an error that Nuxt can handle, setting the status code
    throw createError({
        statusCode: 400, // Or 500
        statusMessage: 'Failed to send email',
        data: error // Optionally include error details
    });
  }
});

// In your nuxt.config.ts, define runtimeConfig:
// export default defineNuxtConfig({
//   runtimeConfig: {
//     resendApiKey: process.env.NUXT_RESEND_API_KEY, // Server-side only
//     public: {
//       // Public keys accessible on client-side
//     }
//   }
// })
// And set NUXT_RESEND_API_KEY in your .env

3. Auslösen: Rufen Sie den Endpunkt /api/send (mithilfe der POST-Methode) von Ihren Nuxt-Seiten oder -Komponenten aus mithilfe von $fetch oder useFetch auf.

Senden mit Vercel-Funktionen

Vercel-Funktionen sind serverlose Funktionen, die sich nahtlos in Next.js integrieren lassen oder eigenständig verwendet werden können. Das obige Next.js-Beispiel zeigt bereits die Verwendung in einer Vercel-Umgebung. Wenn Sie Vercel-Funktionen ohne Next.js verwenden (z. B. mit einem statischen Site-Generator oder einem anderen auf Vercel bereitgestellten Framework), ist der Ansatz ähnlich:

1. Funktion erstellen: Erstellen Sie eine Datei im Verzeichnis api/ Ihres Projekts (z. B. api/send.ts).

// api/send.ts (Example for standard Vercel Function)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // You might need to install resend

// Ensure RESEND_API_KEY is set as a Vercel Environment Variable
const resendApiKey = process.env.RESEND_API_KEY;

if (!resendApiKey) {
  console.error("RESEND_API_KEY is not set");
  // Don't proceed if the key is missing in production
}

const resend = new Resend(resendApiKey);

export default async function handler(
  request: VercelRequest,
  response: VercelResponse,
) {
  // Recommended: Check for POST method
  if (request.method !== 'POST') {
    return response.status(405).json({ message: 'Method Not Allowed' });
  }

  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend & Vercel Functions!',
      html: '<strong>It works on Vercel!</strong>',
      // React templates can be used if your function bundles React
    });

    if (error) {
      console.error('Resend Error:', error);
      return response.status(400).json(error);
    }

    return response.status(200).json(data);

  } catch (e) {
    console.error('Handler Error:', e);
    return response.status(500).json({ message: 'Internal Server Error' });
  }
}

2. Umgebungsvariable konfigurieren: Fügen Sie Ihren RESEND_API_KEY als Umgebungsvariable in Ihren Vercel-Projekteinstellungen hinzu.

3. Bereitstellen: Stellen Sie Ihr Projekt mithilfe der Vercel CLI (vercel) oder der Git-Integration bereit.

4. Auslösen: Senden Sie eine POST-Anforderung an die bereitgestellte Funktions-URL (z. B. https://your-project.vercel.app/api/send).

Explore more

Fathom-R1-14B: Fortschrittliches KI-Argumentationsmodell aus Indien

Fathom-R1-14B: Fortschrittliches KI-Argumentationsmodell aus Indien

Künstliche Intelligenz wächst rasant. FractalAIResearch/Fathom-R1-14B (14,8 Mrd. Parameter) glänzt in Mathe & Logik.

5 June 2025

Cursor 1.0 mit BugBot: KI-gestütztes Automatisierungstest-Tool ist da:

Cursor 1.0 mit BugBot: KI-gestütztes Automatisierungstest-Tool ist da:

Die Softwareentwicklung erlebt Innovationen durch KI. Cursor, ein KI-Editor, erreicht mit Version 1.0 einen Meilenstein.

5 June 2025

30+ öffentliche Web 3.0 APIs, die Sie jetzt nutzen können

30+ öffentliche Web 3.0 APIs, die Sie jetzt nutzen können

Der Aufstieg von Web 3.0: Dezentral, nutzerorientiert, transparent. APIs ermöglichen innovative dApps und Blockchain-Integration.

4 June 2025

Praktizieren Sie API Design-First in Apidog

Entdecken Sie eine einfachere Möglichkeit, APIs zu erstellen und zu nutzen

Kostenlos registrierenDownload