Le moderne applicazioni software spesso si affidano alla comunicazione via email per interagire con gli utenti. Possono inviare codici di autenticazione durante i tentativi di accesso, email di marketing o newsletter, ad esempio. Ciò significa che le notifiche via email sono tipicamente il mezzo di comunicazione più comune con gli utenti.
In questo tutorial, imparerai come progettare splendidi modelli di email con React Email e inviarli usando Resend – una piattaforma API per email semplice e potente.
Prerequisiti
Per trarre il massimo da questo tutorial, è necessario avere una comprensione di base di React o Next.js.
Useremo anche i seguenti strumenti:
-
React Email: Una libreria che ti permette di creare modelli di email splendidamente progettati utilizzando componenti React.
-
Resend: Una piattaforma API semplice e potente per inviare email dalle tue applicazioni.
Come Costruire l’Applicazione con Next.js
In questa sezione, creerai una semplice applicazione di supporto clienti. L’app includerà un modulo per consentire agli utenti di inviare le loro richieste, che attiverà una notifica via email confermando che è stato creato un ticket di supporto.
Per iniziare, configureremo prima l’interfaccia utente e un endpoint API.
Esegui il seguente comando per creare un nuovo progetto Next.js TypeScript:
npx create-next-app react-email-resend
Aggiorna il file app/page.tsx per visualizzare un modulo che raccoglie i dettagli del cliente, inclusi il nome completo, l’indirizzo email, l’oggetto del ticket e un messaggio dettagliato che descrive il problema. Quando il modulo viene inviato, i dati inseriti vengono registrati nella console utilizzando la funzione handleSubmit.
"use client";
import support from "@/app/images/support.jpg";
import { useState } from "react";
import Image from "next/image";
export default function Page() {
//👇🏻 stati di input
const [name, setName] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [subject, setSubject] = useState<string>("");
const [content, setContent] = useState<string>("");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
//👇🏻 registra l'input dell'utente
console.log({ name, email, subject, content });
};
return ({/** -- elementi UI -- */})
}
Restituisci gli elementi UI del modulo che accettano il nome completo dell’utente, l’indirizzo email, l’oggetto del ticket e un messaggio dettagliato che descrive il problema.
return (
<main className='w-full min-h-screen flex items-center justify-between'>
<form className='w-full' onSubmit={handleSubmit}>
<label htmlFor='name' className='opacity-60'>
Full Name
</label>
<input
type='text'
className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
id='name'
required
value={name}
onChange={(e) => setName(e.target.value)}
/>
<label htmlFor='email' className='opacity-60'>
Email Address
</label>
<input
type='email'
className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
id='email'
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<label htmlFor='subject' className='opacity-60'>
Subject
</label>
<input
type='text'
className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
id='subject'
value={subject}
onChange={(e) => setSubject(e.target.value)}
required
/>
<label htmlFor='message' className='opacity-60'>
Message
</label>
<textarea
rows={7}
className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
id='message'
required
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<button className='w-full bg-blue-500 py-4 px-3 rounded-md font-bold text-blue-50'>
SEND MESSAGE
</button>
</form>
</div>
</main>
);
Qui c’è la pagina risultante dal componente:
Successivamente, crea un endpoint API (/api/route.ts) che accetta l’input del cliente.
cd app
mkdir api && cd api
touch route.ts
Copia il seguente codice nel file api/route.ts. L’endpoint API registra l’input del cliente nella console al momento della ricezione.
import { NextRequest, NextResponse } from "next/server";
export async function POST(req: NextRequest) {
const { name, email, subject, content } = await req.json();
//👇🏻 registra i contenuti
console.log({ name, email, subject, content });
return NextResponse.json({
message: "Email sent successfully",
data,
});
}
Aggiorna la funzione handleSubmit per inviare i dati del cliente all’endpoint API e restituire la risposta JSON:
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const response = await fetch("/api", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name, email, subject, content }),
});
const data = await response.json();
alert(data.message);
} catch (error) {
console.error(error);
alert("An error occurred, please try again later");
}
setName("");
setEmail("");
setSubject("");
setContent("");
};
Congratulazioni! Hai configurato la raccolta e l’invio dei dati. Nelle prossime sezioni, ti guiderò nella creazione e nell’invio di modelli email con React Email e Resend.
Come creare modelli email utilizzando React Email
React Email ti consente di creare e inviare componenti email utilizzando React e TypeScript. Supporta diversi client email, tra cui Gmail, Yahoo Mail, Outlook e Apple Mail.
React Email fornisce anche diversi componenti UI che ti permettono di personalizzare i modelli email secondo il layout che preferisci utilizzando componenti React JSX/TSX.
Installa il pacchetto React Email e i suoi componenti eseguendo il codice qui sotto:
npm install react-email -D -E
npm install @react-email/components -E
Includi questo script nel tuo file package.json. Indica a React Email dove si trovano i modelli email nel tuo progetto.
"scripts": {
"email": "email dev --dir src/emails"
},
Una delle funzionalità di React Email è la possibilità di visualizzare in anteprima il tuo modello email nel browser durante lo sviluppo, permettendoti di vedere come apparirà nell’email del destinatario.
Quindi, crea una cartella emails contenente un file TicketCreated.tsx all’interno della cartella src di Next.js e copia il seguente codice nel file:
import * as React from "react";
import {
Body,
Container,
Head,
Heading,
Hr,
Html,
Link,
Preview,
Text,
Tailwind,
} from "@react-email/components";
interface TicketCreatedProps {
username: string;
ticketID: string;
}
const baseUrl = process.env.VERCEL_URL || "http://localhost:3000";
Nell’esempio di codice sopra, abbiamo importato i componenti necessari per costruire il modello email.
Successivamente, aggiungi il componente TicketCreated al file per rendere il modello email utilizzando i componenti React Email.
export const TicketCreated = ({ username, ticketID }: TicketCreatedProps) => {
return (
<Html>
<Head />
<Preview>Support Ticket Confirmation Email 🎉</Preview>
<Tailwind>
<Body className='bg-white my-auto mx-auto font-sans px-2'>
<Container className='border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]'>
<Heading className='text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0'>
Your Ticket has been created
</Heading>
<Text className='text-black text-[14px] leading-[24px]'>
Hello {username},
</Text>
<Text className='text-black text-[14px] leading-[24px]'>
<strong>Support Ticket</strong> (
<Link
href={`${baseUrl}/ticket/${ticketID}`}
className='text-blue-600 no-underline'
>
{`#${ticketID}`}
</Link>
) has been created successfully.
</Text>
<Text className='text-black text-[14px] leading-[24px]'>
The Support team will review your ticket and get back to you
shortly.
</Text>
<Hr className='border border-solid border-[#eaeaea] my-[26px] mx-0 w-full' />
<Text className='text-[#666666] text-[12px] leading-[24px]'>
This message was intended for{" "}
<span className='text-black'>{username}</span>. If you did not
create this ticket, please ignore this email.
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
};
Infine, esportalo e aggiungi valori predefiniti per le props:
TicketCreated.PreviewProps = {
username: "alanturing",
ticketID: "9083475",
} as TicketCreatedProps;
export default TicketCreated;
Esegui npm run email nel tuo terminale per visualizzare in anteprima il modello email.
Questo modello di email notifica ai clienti che il loro ticket di supporto è stato creato e che qualcuno del team di supporto li contatterà.
React Email offre una varietà di modelli di email pre-progettati, rendendo facile creare email bellamente stilizzate per scopi diversi. Puoi controllare la demo disponibile per vedere esempi di ciò che è possibile.
Come Inviare Email con Resend
Resend è una semplice API di email che ti consente di inviare email all’interno della tua applicazione software. Supporta una vasta gamma di linguaggi di programmazione, tra cui JavaScript (Next.js, Express, Node.js), Python, PHP, Go e Rust, tra gli altri.
Resend e React Email possono essere facilmente integrati insieme poiché il co-fondatore di Resend, Bu Kinoshita, è anche il creatore di React Email.
Crea un account su Resend. Una volta effettuato l’accesso, vai alla sezione delle chiavi API nel tuo cruscotto e copia la tua chiave API in un file .env.local.
//👇🏻 .env.local file
RESEND_API_KEY=<RESEND_API_KEY>
//👇🏻 .env.local file
import { NextRequest, NextResponse } from "next/server";
Aggiorna il punto finale API per inviare un'email utilizzando il modello di React Email, come mostrato di seguito:
import { v4 as generateID } from "uuid";
//👇🏻 funzione generatore di ID ticket
import TicketCreated from "@/emails/TicketCreated";
//👇🏻 importa il template dell'email
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(req: NextRequest) {
//👇🏻 importa Resend
const { name, email, subject, content } = await req.json();
//👇🏻 accetta l'input del cliente dal frontend
console.log({ name, email, subject, content });
//👇🏻 li registra
const { data, error } = await resend.emails.send({
from: "Acme <[email protected]>",
to: [email],
subject: "Ticket Confirmation Email 🎉",
react: TicketCreated({ username: name, ticketID: generateID() }),
});
if (error) {
return NextResponse.json(
{ message: "Error sending email" },
{ status: 500 }
);
}
return NextResponse.json({
message: "Email sent successfully",
data,
});
}
//👇🏻 invia un’email utilizzando il template dell’email
Congratulazioni!🥳 Hai completato questo tutorial.
Ecco una breve demo dell’applicazione:
Passaggi successivi
In questo tutorial, hai imparato come creare template di email con React Email e inviarli usando Resend. Entrambi i pacchetti ti permettono di integrare facilmente la comunicazione via email nelle tue applicazioni.
Sia che si tratti di semplici notifiche via email, newsletter o campagne di marketing, React Email e Resend offrono una soluzione efficiente e personalizzabile per soddisfare le tue esigenze.
- Alcune risorse utili includono:
- Componenti predefiniti di React Email
- Documentazione Email React