Transactional Emails

Utilizamos o serviço Resend para envio de e-mails transacionais. Os templates, localizados no pacote @repo/email, são construídos com React Email: uma coleção de componentes de alta qualidade (e sem estilo) para criação de e-mails com React e TypeScript.

Instalação

Para instalar o pacote @repo/email, execute o seguinte comando:

npx @rodrigo-work/cli add --name packages/email

Envio de E-mails

Para enviar um e-mail, você pode usar o objeto resend, importado do pacote @repo/email:

import { resend } from '@repo/email';

await resend.emails.send({
  from: 'sender@acme.com',
  to: 'recipient@acme.com',
  subject: 'The email subject',
  text: 'The email text',
});''

Templates de E-mail

O pacote email é separado da pasta da aplicação principal por dois motivos:

1. Permite importar os templates no app de email, possibilitando a pré-visualização na interface (UI).
2. Permite importar tanto os templates quanto o SDK em outras aplicações para uso direto no envio de e-mails.

O Resend funciona perfeitamente com o React Email. Veja um exemplo de envio usando um template React:

import { resend } from '@repo/email';
import { ContactTemplate } from '@repo/email/templates/contact';

await resend.emails.send({
  from: 'sender@acme.com',
  to: 'recipient@acme.com',
  subject: 'The email subject',
  react: <ContactTemplate name={name} email={email} message={message} />,
});

Pré-visualização de E-mails

Para visualizar os templates, basta executar o app email.

import { resend } from '@repo/email';
import { ContactTemplate } from '@repo/email/templates/contact';

await resend.emails.send({
  from: 'sender@acme.com',
  to: 'recipient@acme.com',
  subject: 'The email subject',
  react: <ContactTemplate name={name} email={email} message={message} />,
});

A aplicação exibirá os templates renderizados no navegador, facilitando ajustes de layout e conteúdo antes do envio.