Tutorial Next.js + Resend: Configurazione e Test delle Email

Ciao, qui è Hoda!

Di recente ho implementato un sistema di autenticazione usando Next.js + Resend. Questo articolo serve in parte come promemoria per il mio futuro io, quindi ho raccolto qui i passaggi che ho seguito per la configurazione.

Cos’è Resend?

In breve, Resend è "an email-sending API built for developers." Rispetto ai servizi di invio email tradizionali, è progettato per semplificare notevolmente il lavoro degli sviluppatori che vogliono aggiungere funzionalità email alle applicazioni moderne — web app, app mobili e così via.

Resend supporta un’ampia gamma di linguaggi e framework, permettendoti di iniziare subito in ambienti come:

• JavaScript/TypeScript: Node.js, Next.js, React, Express e altri
• Altri linguaggi: Python, PHP (Laravel), Ruby (Rails), Go, Rust, Elixir, Java, .NET e altri

Cosa puoi fare con Resend

Resend non serve solo per inviare email, ma offre funzionalità davvero utili per lo sviluppo.

• Visibilità e gestione: Puoi controllare lo stato dettagliato di ogni email inviata (inviata, aperta, cliccata, rimbalzata, ecc.) direttamente dalla dashboard.
• Gestione della deliverability del dominio: Autentica il tuo dominio personale per fare in modo che le tue email finiscano in modo affidabile nella casella di posta del destinatario.
• Template basati su React: Puoi costruire l’HTML delle tue email usando componenti React, rendendolo una scelta naturale per gli sviluppatori frontend.
• Condivisione con il team: Puoi condividere il contenuto di un’email inviata con i colleghi tramite un link pubblico accessibile senza autenticazione per 48 ore.

I passaggi fondamentali per iniziare

Ecco il flusso generale per integrare Resend in un progetto.

1. Prerequisiti

Per prima cosa, crea un account sul sito ufficiale e occupati di due cose:

• Creare un’API key: Genera una chiave di autenticazione per consentire alla tua applicazione di chiamare Resend.
• Verificare un dominio: Configura il sistema per poter inviare email da un dominio di tua proprietà.

2. Installare l’SDK

Per un ambiente Node.js, ad esempio, installa l’SDK con:

npm install resend

3. L’implementazione di base

Il comando di invio più semplice possibile (per qualcosa come Next.js) è strutturato così. Imposta la tua API key come variabile d’ambiente, quindi chiama semplicemente il metodo resend.emails.send.

import { Resend } from 'resend';

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

await resend.emails.send({
  from: 'you@yourdomain.com',
  to: 'recipient@example.com',
  subject: 'Hello World',
  html: '<p>This is my first email from Resend!</p>'
});

Un consiglio sui “test di invio” da conoscere subito

Se durante lo sviluppo invii ripetutamente messaggi a indirizzi email reali, la reputazione del tuo dominio potrebbe risentirne, aumentando il rischio che in futuro le tue email vengano contrassegnate come spam.

Per evitare questo problema, Resend mette a disposizione indirizzi di test dedicati che permettono di simulare diversi scenari senza compromettere la reputazione del tuo dominio.

• Test di invio riuscito: invia a delivered@resend.dev.
• Test di rimbalzo (bounce): invia a bounced@resend.dev.
• Test di segnalazione come spam: invia a complained@resend.dev.

L’uso di questi strumenti consente di sviluppare in sicurezza senza inquinare l’ambiente di produzione.

Se dovessi descrivere Resend con un’immagine, pensaci come a uno sportello di spedizioni internazionali intelligente. Non hai bisogno di conoscere procedure vecchie e complicate (configurare un server di posta da solo): ti basta consegnare l’indirizzo e il messaggio, e Resend si occupa di instradarlo in modo sicuro, comunicandoti inoltre in tempo reale esattamente dove si trova il tuo pacco.

Aggiungere Resend a un progetto Next.js

1. Prerequisiti

Prima di iniziare l’implementazione, completa due operazioni nella dashboard di Resend:

• Creare un’API key: Ottieni la chiave che la tua app userà per l’autenticazione.
• Verificare un dominio: Registra e verifica il dominio dal quale invierai i messaggi.

A proposito, anche il piano gratuito permette di inviare 3.000 email transazionali al mese, risultando più che sufficiente per un piccolo progetto.

2. Installare l’SDK

Per prima cosa, esegui questo comando nella cartella principale del tuo progetto per installare l’SDK Node.js di Resend:

npm install resend

3. Creare un template email

Il punto di forza di Resend è che puoi usare direttamente i componenti React come template per le email. Per esempio, crea un file chiamato components/email-template.tsx con un contenuto simile a questo:

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

4. Implementare la logica di invio (API Route)

A questo punto, crea un endpoint API per effettuare l’invio effettivo dell’email. Se stai usando l’App Router, crealo in app/api/send/route.ts (per il Pages Router, usa pages/api/send.ts).

Qui inizializziamo Resend usando la variabile d’ambiente RESEND_API_KEY e inviamo un’email utilizzando il template appena creato.

import { EmailTemplate } from '../../../components/EmailTemplate';
import { Resend } from 'resend';

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

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>', // your verified domain
      to: ['delivered@resend.dev'],       // recipient
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }), // using the React template
    });

    if (error) {
      return Response.json({ error }, { status: 500 });
    }

    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

5. Controllare lo stato dell’invio ed effettuare i test

Dalla dashboard di Resend puoi verificare nel dettaglio l’esito di un’email inviata da Next.js.

• Tracciare gli eventi delle email: Segui i log per scoprire se un’email è stata “inviata”, “consegnata” o “rimbalzata” (rifiutata dal server del destinatario).
• Usare gli indirizzi di test: Durante lo sviluppo, è consigliabile verificare il comportamento usando gli indirizzi di test indicati di seguito anziché il tuo indirizzo email personale.
  • Test di successo: Invia a delivered@resend.dev per osservare il comportamento in caso di consegna riuscita.
  • Test di rimbalzo: Invia a bounced@resend.dev per verificare la gestione degli errori.

Se dovessi descrivere questa configurazione in Next.js, è come gestire una linea di spedizione dedicata nel retro del tuo negozio.

Scrivi il messaggio usando uno strumento che già conosci bene — i componenti React — e lo inserisci nella linea di consegna dedicata di Resend (tramite SDK/API). Da quel momento, viene recapitato automaticamente ovunque nel mondo e ricevi una ricevuta in tempo reale che ne conferma l’arrivo a destinazione. È questo il livello di fluidità che ottieni alla fine.