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

Exemple de code

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 :

Exemple de code

"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 :

Exemple de code

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 :

Exemple de code

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.

Ressources associées

Poursuivez avec la documentation, les guides et les exemples sur ce sujet. Les ressources sont en anglais.

Regarder le guideGetting started with email Comprendre le conceptShould I use a Bird SDK or call the API directly?Explorer la fonctionnalitéEmail Suivre le parcours d'apprentissageBuild your first integration

Essayez la pratique et obtenez un guide d'implémentation