TypeScript · Next.js
Senden Sie eine E-Mail aus einer Next.js-App-Router-Server-Action mit @messagebird/sdk. Sie benötigen einen Bird API-Schlüssel: Erstellen Sie einen unter Developers > API keys (Erste E-Mail senden führt Sie durch den Vorgang) und hinterlegen Sie ihn in .env.local als BIRD_API_KEY.
1. Installieren
Codebeispiel
npx create-next-app@latest my-app --yes --ts --eslint --no-tailwind --app --no-src-dir --use-npm --disable-git
cd my-app
npm install @messagebird/sdk2. Senden
Erstellen Sie app/actions/send-welcome.ts. Die "use server"-Direktive hält die Datei (und Ihren API-Schlüssel) auf dem Server:
Codebeispiel
"use server";
import { BirdClient } from "@messagebird/sdk";
const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });
export async function sendWelcome() {
const msg = await bird.email.send({
from: "onboarding@messagebird.dev",
to: ["delivered@messagebird.dev"],
subject: "Hello from Bird",
html: "<p>My first Bird email.</p>",
});
console.log(msg.id, msg.status); // "em_…", "accepted"
return { id: msg.id, status: msg.status };
}onboarding@messagebird.dev ist der gemeinsame Onboarding-Absender von Bird und delivered@messagebird.dev ist ein Sandbox-Empfänger, der immer zustellt: keine Domain-Verifizierung nötig. Das SDK leitet die Region aus dem bk_us1_- / bk_eu1_-Präfix Ihres Schlüssels ab (keine Base-URL zu konfigurieren) und erzeugt pro Aufruf automatisch einen Idempotency-Key, sodass wiederholte Sendungen sicher sind.
3. Ausprobieren
Verbinden Sie die Action mit einem Formular in app/page.tsx und klicken Sie auf den Button:
Codebeispiel
import { sendWelcome } from "./actions/send-welcome";
export default function Home() {
return (
<form action={sendWelcome}>
<button type="submit">Send email</button>
</form>
);
}Führen Sie npm run dev aus, öffnen Sie http://localhost:3000 und senden Sie ab. Bird nimmt die E-Mail mit einem 202 an und stellt sie asynchron zu; das Terminal mit dem Dev-Server protokolliert die em_-ID und den Status:
Codebeispiel
em_01ky7ma8y2es1s2akzk53tmjn0 acceptedNächste Schritte
- TypeScript-E-Mail-SDK: die vollständige E-Mail-Oberfläche (send, get, list) und das Fehlermodell.
- Erste E-Mail senden: einen API-Schlüssel erstellen und alle Sandbox-Adressen im Überblick.
- Sende-Domains: eigene Domain für den Produktionsversand verifizieren.
- E-Mail-API-Referenz: das vollständige Request- und Response-Schema.
Verwandte Ressourcen
Weiter mit der Dokumentation, Anleitungen und Beispielen zu diesem Thema. Die Ressourcen sind auf Englisch.
Anleitung ansehenGetting started with emailDas Konzept verstehenShould I use a Bird SDK or call the API directly?Die Funktion erkundenEmailDem Lernpfad folgenBuild your first integration
Übung ausprobieren und ein Implementierungs-Briefing erhalten