TypeScript · Next.js

Envoyez un e-mail depuis une Server Action du App Router Next.js avec @messagebird/sdk. Vous avez besoin d'une clé API Bird : créez-en une dans Developers > Clés API (Envoyer votre premier e-mail détaille la procédure), puis ajoutez-la dans .env.local sous le nom BIRD_API_KEY.

1. Installer

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

Créez app/actions/send-welcome.ts. La directive "use server" maintient ce fichier (et votre clé API) côté serveur :

"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 est l'expéditeur d'intégration partagé de Bird et delivered@messagebird.dev est un destinataire sandbox qui aboutit toujours : aucune vérification de domaine requise. Le SDK déduit la région à partir du préfixe bk_us1_ / bk_eu1_ de votre clé (aucune URL de base à configurer) et génère automatiquement un Idempotency-Key par appel, ce qui rend les envois réessayés sûrs.

3. Essayer

Reliez l'action à un formulaire dans app/page.tsx et cliquez sur le bouton :

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

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

Lancez npm run dev, ouvrez http://localhost:3000 et soumettez le formulaire. Bird accepte l'e-mail avec un 202 et le distribue de manière asynchrone ; le terminal exécutant le serveur de développement affiche l'ID em_ et le statut :

em_01ky7ma8y2es1s2akzk53tmjn0 accepted

Étapes suivantes

• E-mail TypeScript SDK : la surface e-mail complète (send, get, list) et le modèle d'erreur.
• Envoyer votre premier e-mail : créer une clé API et l'ensemble complet des adresses sandbox.
• Domaines d'envoi : vérifiez votre propre domaine pour l'envoi en production.
• Référence e-mail API : le schéma complet de requête et de réponse.