TypeScript · Next.js

Verstuur een e-mail vanuit een Next.js App Router Server Action met @messagebird/sdk. Je hebt een Bird API-sleutel nodig: maak er een aan in Developers > API keys (Je eerste e-mail versturen legt de stappen uit) en zet de sleutel in .env.local als BIRD_API_KEY.

1. Installeren

Codevoorbeeld

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. Versturen

Maak app/actions/send-welcome.ts aan. De "use server"-directive houdt het bestand (en je API-sleutel) op de server:

Codevoorbeeld

"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 is de gedeelde onboarding-afzender van Bird en delivered@messagebird.dev is een sandbox-ontvanger die altijd aflevert: geen domeinverificatie nodig. De SDK leidt de regio af uit het bk_us1_- / bk_eu1_-voorvoegsel van je sleutel (geen basis-URL om te configureren) en genereert automatisch een Idempotency-Key per aanroep, zodat herhaalde verzendingen veilig zijn.

3. Uitproberen

Koppel de action aan een formulier in app/page.tsx en klik op de knop:

Codevoorbeeld

import { sendWelcome } from "./actions/send-welcome";

export default function Home() {
  return (
    <form action={sendWelcome}>
      <button type="submit">Send email</button>
    </form>
  );
}

Start npm run dev, open http://localhost:3000 en verzend het formulier. Bird accepteert de e-mail met een 202 en levert deze asynchroon af; de terminal waarop de dev-server draait logt het em_-ID en de status:

Codevoorbeeld

em_01ky7ma8y2es1s2akzk53tmjn0 accepted

Vervolgstappen

TypeScript e-mail-SDK: het volledige e-mailoppervlak (send, get, list) en het foutmodel.
Je eerste e-mail versturen: een API-sleutel aanmaken en het volledige overzicht van sandbox-adressen.
Verzenddomeinen: verifieer je eigen domein voor productieverzending.
E-mail-API-referentie: het volledige request- en responseschema.

Gerelateerde bronnen

Ga verder met de documentatie, gidsen en voorbeelden voor dit onderwerp. De bronnen zijn in het Engels.

Bekijk de gidsGetting started with email Begrijp het conceptShould I use a Bird SDK or call the API directly?Ontdek de mogelijkheidEmail Volg het leerpadBuild your first integration

Probeer de oefening en ontvang een implementatieoverzicht