Sign inGet Started

TypeScript · Next.js

Wyślij e-mail z Next.js App Router Server Action za pomocą @messagebird/sdk. Potrzebujesz klucza API Bird: utwórz go w Developers > API keys (przewodnik Wyślij swój pierwszy e-mail opisuje ten proces), a następnie umieść go w .env.local jako BIRD_API_KEY.

1. Instalacja

Przykład kodu
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. Wysyłka

Utwórz app/actions/send-welcome.ts. Dyrektywa "use server" sprawia, że plik (i Twój klucz API) pozostaje na serwerze:
Przykład kodu
"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 to współdzielony nadawca onboardingowy Bird, a delivered@messagebird.dev to odbiorca sandbox, który zawsze doręcza wiadomość, bez konieczności weryfikacji domeny. SDK rozpoznaje region na podstawie prefiksu bk_us1_ / bk_eu1_ Twojego klucza (nie trzeba konfigurować bazowego URL-a) i automatycznie generuje Idempotency-Key przy każdym wywołaniu, więc ponowne wysyłki są bezpieczne.

3. Wypróbuj

Podepnij akcję do formularza w app/page.tsx i kliknij przycisk:
Przykład kodu
import { sendWelcome } from "./actions/send-welcome";

export default function Home() {
  return (
    <form action={sendWelcome}>
      <button type="submit">Send email</button>
    </form>
  );
}
Uruchom npm run dev, otwórz http://localhost:3000 i wyślij formularz. Bird przyjmuje e-mail z kodem 202 i doręcza go asynchronicznie; terminal z uruchomionym serwerem deweloperskim loguje ID em_ i status:
Przykład kodu
em_01ky7ma8y2es1s2akzk53tmjn0 accepted

Następne kroki