ZeroToShip

Docs/Tutorial

// tutorial

Mandare email (Resend)

Le email transazionali passano da Resend. Sotto il cofano c'è libs/resend.ts: una funzione sendEmail() e via.

1. Verifica il dominio

Su resend.com/domains aggiungi il tuo dominio (es. zerotoship.com). Resend ti dà 3-4 record DNS da aggiungere sul tuo provider (Cloudflare, Namecheap, ecc.):

  • Un record MX per Resend
  • Un record TXT con SPF
  • Uno o due record TXT con DKIM

Aspetta la verifica (di solito 5-30 minuti) e sei operativo. Consiglio: usa un sottodominio tipo resend.tuodominio.com per isolare le email transazionali dalle tue email personali.

2. La funzione sendEmail

Il wrapper è minimale — istanzia Resend con la chiave da .env, manda, lancia se fallisce:

libs/resend.ts
ts
import { Resend } from "resend";
import config from "@/config";

const resend = new Resend(process.env.RESEND_API_KEY);

export const sendEmail = async ({ to, subject, text, html, replyTo }) => {
  const { data, error } = await resend.emails.send({
    from: config.resend.fromAdmin,
    to,
    subject,
    text,
    html,
    ...(replyTo && { replyTo }),
  });

  if (error) throw error;
  return data;
};

3. Esempio: welcome email dopo l'acquisto

Dentro il webhook Stripe (app/api/webhook/stripe/route.ts), nel case checkout.session.completed, aggiungi:

app/api/webhook/stripe/route.ts
ts
import { sendEmail } from "@/libs/resend";

await sendEmail({
  to: customer.email,
  subject: "Benvenuto in ZeroToShip",
  text: "Ciao! Ecco il link al repo: https://github.com/...",
  html: `<p>Ciao!</p><p>Ecco il link al repo: <a href="...">apri</a></p>`,
});

4. Cambia il mittente

I due mittenti live in config.ts sotto resend. fromNoReply per email automatiche, fromAdmin per quelle che sembrano scritte da te (a cui uno può rispondere):

config.ts
ts
resend: {
  fromNoReply: `ZeroToShip <noreply@resend.tuodominio.com>`,
  fromAdmin: `Alberto <alberto@resend.tuodominio.com>`,
  supportEmail: "ciao@tuodominio.com",
},

5. Magic link e Resend

Le email dei magic link non partono da libs/resend.ts: le manda Supabase. Ma puoi (e dovresti) configurare Supabase per usare Resend come SMTP: vai in Project Settings → Authentication → SMTP Settings nella dashboard Supabase e incolla le credenziali SMTP che Resend ti dà. Così tutte le email — magic link e tue transazionali — partono dallo stesso dominio verificato.