Sign inGet Started

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/sdk

2. 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 accepted

Nächste Schritte