E-mail versturen met JavaScript

JavaScript verstuurt e-mail vanaf een server, nooit rechtstreeks vanuit de browser. Client-side code kan geen SMTP-verbinding openen, en e-mailgegevens in een pagina zetten zou ze overhandigen aan iedereen die de devtools opent. De echte vraag is dus welk server-side pad je gebruikt: SMTP via een library als Nodemailer, of een HTTP-verzoek naar een e-mail-API. Dit artikel laat beide zien.

Waarom kan de browser geen e-mail versturen?

E-mailbezorging loopt via SMTP, een TCP-protocol. Browsers stellen geen ruwe TCP-sockets beschikbaar aan JavaScript, dus er is geen client-side manier om met een mailserver te communiceren. Zelfs als dat kon, zouden de SMTP-inloggegevens of de API-sleutel in code staan die iedereen kan lezen. De browser verzamelt de formulierinvoer en stuurt die naar je backend; het backend verstuurt de e-mail. Die scheiding is het hele patroon.

Hoe verstuur je vanuit een Node-backend met SMTP?

Nodemailer is de standaardlibrary voor SMTP in Node. Je configureert een transport eenmalig en roept daarna sendMail aan:

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport({
  host: "smtp.example.com",
  port: 587,
  secure: false,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

await transporter.sendMail({
  from: "you@yourdomain.com",
  to: "recipient@example.org",
  subject: "Your receipt",
  text: "Thanks for your order.",
  html: "<p>Thanks for your order.</p>",
});

Dit werkt goed op een langlopende server. De volledige walkthrough, inclusief bijlagen en lokaal testen, vind je in e-mails versturen met Nodemailer.

Hoe verstuur je met een HTTP e-mail-API?

Het andere pad is een HTTP-verzoek. Je backend roept een e-mail-API aan met fetch, waardoor je geen mailserver hoeft te draaien en het hetzelfde werkt op een traditionele host of een serverless functie:

const res = await fetch("https://api.bird.com/v1/emails", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.BIRD_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    from: "you@yourdomain.com",
    to: "delivered@bird.dev",
    subject: "Hello from JavaScript",
    html: "<p>It works.</p>",
  }),
});

if (!res.ok) {
  throw new Error(`Send failed: ${res.status}`);
}

De sleutel staat nog steeds op de server, in een omgevingsvariabele, en wordt nooit naar de client gestuurd.

Verstuur het met Bird

De Bird Node SDK wrapt diezelfde HTTP-aanroep zodat je de handmatige fetch overslaat en getypeerde resultaten krijgt:

import { BirdClient } from "@messagebird/sdk";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const { data, error } = await bird.email
  .send({
    from: "you@yourdomain.com",
    to: ["delivered@bird.dev"],
    subject: "Hello from Node",
    html: "<p>It works.</p>",
  })
  .safe();

Het delivered@bird.dev-sandboxadres accepteert altijd mail, dus de eerste run bevestigt je setup. Als je je e-mailinhoud als React-componenten bouwt, combineer dit dan met React Email, dat het component rendert naar de HTML die je doorgeeft in html.

FAQ

Kan client-side JavaScript e-mail versturen?

Nee. Browsers kunnen geen SMTP-verbindingen openen, en alle inloggegevens in client-code liggen bloot. De browser stuurt formulierdata naar je backend, en het backend verstuurt de e-mail.

Moet ik Nodemailer of een HTTP API gebruiken?

Nodemailer past goed bij een langlopende server waar je SMTP beheert. Een HTTP API is eenvoudiger als je geen mailserver wilt beheren, en het is de betrouwbare keuze op serverless platformen waar SMTP-sockets niet beschikbaar zijn.

Waar bewaar ik de API-sleutel?

In een server-side omgevingsvariabele, gelezen tijdens runtime. De sleutel mag nooit in front-endcode of in een publieke repository verschijnen.

JavaScript alleen bezorgt geen mail; een server doet dat. Om dieper in te gaan op het API-pad behandelen het e-mailproductoverzicht en de handleiding voor het versturen van e-mail de onderdelen.