Resend - Enviar correos con React

Cuando hablamos de enviar correos desde una aplicacion web, aplicacion movil o aplicacion backend, debemos tener muy en cuenta que aunque parezca una tarea simple, esta puede llevar algo de tiempo hacerla funcionar bien debido a que no solo es enviar una simple plantilla HTML, sino que tambien debes desarrollarla nosotros mismos ademas de asegurarnos de su interactividad, es decir es como una mini aplicacion frontend que lleva sus propias consideraciones.

Y aunque existen servicio como Sendgrid que permiten hacer esto, tambien hay un servicio que añade no solo la facilidad de entregar correos a multiples clientes, sino que tambien nos permite desarrollar las plantillas de correos usando React.

Este servicio se llama Resend, y ademas de solo ser un servicio de la nube tambien es una biblioteca que podemos añadir en nuestros proyectos web con Frameworks de Javascript como Express, Nextjs, o tambien en proyectos de otros lenguajes como PHP, Go, Ruby, Elixir, Java y otros mas.

Creación de cuenta en Resend.com

Cuando creas tu cuenta por primera vez en Resend.com, puedes inmediatamente probar el servicio, enviando correos desde su interfaz grafica.

Creacion de Proyecto

Primero creemos un proyecto desde cero en Nodejs. Empecemos creando una carpeta:

mkdir resend-tutorial

Luego ubiquemos la consola dentro de la carpeta creada:

cd resend-tutorial

Luego inicializaremos un proyecto de Nodejs:

npm init -y

Despues instalaremos el paquete de resend usando el comando:

npm i resend

Luego actualizaremos el archivo package.json de la siguiente forma:

{
  "name": "resend-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Aqui la propiedad mas importante es el "type": "module" que indica que podemos usar los Modulos de Ecmascript 6+.

Crea un archivo index.js con el siguiente código:

import { Resend } from 'resend';

const resend = new Resend('re_QeCwbPos_GPr6khoYaDcbAvRTEBr4F7HM');

resend.emails.send({
  from: 'onboarding@resend.dev',
  to: 'fazt@faztweb.com',
  subject: 'Hello World',
  html: '<p>Congrats on sending your <strong>first email</strong>!</p>'
});

Creacion de un Proyecto en Nextjs

npx create-next-app nextjs-resend-tutorial

√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias? ... No

cd nextjs-resend-tutorial
npm i resend

en src/components/email-template.tsx:

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div className="bg-slate-500">
    <h1 className="text-4xl font-bold">Welcome, {firstName}!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, at.</p>
    <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
        <a href="https://www.google.com">Click me</a>
    </button>
  </div>
);

en src/app/api/send/route.ts:

import { EmailTemplate } from "@/components/email-template";
import { NextResponse } from "next/server";
import { Resend } from "resend";

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

export async function POST() {
  try {
    const data = await resend.emails.send({
      from: "Acme <onboarding@resend.dev>",
      to: ["fazt@faztweb.com"],
      subject: "Hello world",
      react: EmailTemplate({ firstName: "John" }),
      text: "",
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

en src/page.tsx:

"use client"

function HomePage() {
  return (
    <button
      onClick={async () => {
        const res = await fetch("/api/send", {
          method: "POST",
        });
        const data = await res.json();
        console.log(data)
      }}
    >
      Send Email
    </button>
  );
}

export default HomePage;

• https://resend.com/docs/send-with-nextjs

¿Cuanto cuesto Resend?

En la página de precios de Resend Puedes ver que este servicio ofrece el envio de 3000 correos, de forma gratuita por mes, aunque este permite hacer envios de solo 100 por día.