Sign inGet Started

TypeScript · Next.js

Kirim email dari Next.js App Router Server Action dengan @messagebird/sdk. Anda memerlukan Bird API key: buat di Developers > API keys (Kirim email pertama Anda memandu prosesnya), lalu simpan di .env.local sebagai BIRD_API_KEY.

1. Instal

Contoh kode
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. Kirim

Buat app/actions/send-welcome.ts. Direktif "use server" menjaga file ini (dan API key Anda) tetap di server:
Contoh kode
"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 adalah pengirim onboarding bersama milik Bird dan delivered@messagebird.dev adalah penerima sandbox yang selalu berhasil terkirim: tidak perlu verifikasi domain. SDK menentukan region dari prefiks bk_us1_ / bk_eu1_ pada key Anda (tidak perlu mengonfigurasi base URL) dan menghasilkan Idempotency-Key secara otomatis per panggilan, sehingga pengiriman ulang aman.

3. Coba

Hubungkan action ke form di app/page.tsx dan klik tombolnya:
Contoh kode
import { sendWelcome } from "./actions/send-welcome";

export default function Home() {
  return (
    <form action={sendWelcome}>
      <button type="submit">Send email</button>
    </form>
  );
}
Jalankan npm run dev, buka http://localhost:3000, dan submit. Bird menerima email dengan 202 dan mengirimnya secara asinkron; terminal yang menjalankan dev server mencatat em_ ID dan statusnya:
Contoh kode
em_01ky7ma8y2es1s2akzk53tmjn0 accepted

Langkah selanjutnya