Definir um processo único que facilite o desenvolvimento de templates de e-mail de uma maneira agil e eficiente, para isso, é utilizado a biblioteca React Email junto com o Resend para React. De forma geral, o objetivo é tornar o processo de criação e envio de e-mails mais eficiente, produtivo e flexível, permitindo que seja construído experiências de e-mails mais interativas e performáticas para os usuários finais.
Nessa documentação você irá encontrar:
Existem duas formas de configurar o React Email e o Resend. A primeira e mais rápida é o **setup automático**, em que o projeto já está pronto para uso. No entanto, essa abordagem não é muito recomendada, pois o setup automático inclui uma estrutura de pastas diferente do padrão. Para obter mais informações, consulte a [documentação desse setup](https://react.email/docs/getting-started/automatic-setup).
A segunda é o setup manual, no qual, iremos abordar na documentação.
### Configuração inicial
Crie um projeto base ou use um existente. Certifique-se de que o Node.js está instalado. Recomendamos a utilização do Next.JS para trabalhar com a biblioteca.
### Adicionar dependências
Execute os comandos abaixo para instalar as bibliotecas necessárias:
```shell
npm install @react-email/components resend
```
Nessa etapa será abordado como **organizações de pastas, configurações de visualização e** **configurações de envio (integração com o Resend).**
### Organização de Pastas
Ao utilizar o **Next.js** na versão 15 ou superior, uma boa prática é organizar seus templates de e-mails de forma modular, seguindo a estrutura abaixo:
```text
📁 app/
📁 emails/
📁 email/ # Pasta que representa um e-mail específico, por exemplo, "promoção"
📁 templates/ # Pasta com os template específicos deste e-mail
📁 components/ # Pasta com os components específicos deste e-mail
📄 index.tsx # Arquivo principal onde o e-mail será construído
📄 types.ts # Arquivo com as tipagens utilizadas pelo e-mail
📁 api/
📁 send/ # Pasta onde será configurado o envio do Resend
📄 route.ts # Arquivo de envio de e-mail
```
Essa organização modular facilita a manutenção e escalabilidade do projeto, permitindo reutilizar e ajustar templates com facilidade.
### Configuração de visualização de e-mail
Como no React Email utilizamos o **Tailwind** e componentes do próprio React Email para escrevermos o nosso e-mail, é necessário utilizamos um método para visualizar o HTML final.
Para isso, podemos utilizar o método `render` do proprio React Email. com isso, no arquivo `src/app/page.tsx` :
```typescript
import { render } from "@react-email/render";
import { FirstEmail } from "./emails/wefit/";
export default function Home() {
const emailHtml = render(<FirstEmail />);
// Nessa const encontra-se o HTML final do e-mail.
console.log(emailHtml)
return <FirstEmail />;
}
```
### Resend
Nesse tópico iremos abordar sobre a ferramenta de envio **Resend**. Inicialmente, iremos utiliza-ló somente para testar os nossos envios
1. **Configuração do Resend**
Adicione a chave API do Resend ao seu projeto. Crie um arquivo `.env`:
```typescript
RESEND_API_KEY=your_resend_api_key
```
2. **Configuração do Cliente**
Crie uma pasta chamada `app/api/send/route.ts` esse arquivo será uma rota em nossa aplicação que será responsável por fazer o disparo do e-mail.
para isso, podemos iniciar o cliente da seguinte forma:
```typescript
import Resend from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
```
3. **Enviar o E-mail**
> 💡 Para realizarmos o envio de e-mail, é necessário a disponibilidade de um domínio, conforme a documentação um domínio é usado para enviar e-mails usando seu próprio domínio. Verificar um domínio é uma etapa necessária porque é essencial para garantir a entregabilidade de seus e-mails.
> Para verificar um domínio, você deve definir as entradas de DNS que nos concedem permissão para enviar e-mails em seu nome.
>
> *** Contudo, iremos utilizar um domínio de teste do próprio Resend, sendo ele: delivered@resend.dev**
Para verificar um domínio, você deve definir as entradas de DNS que nos concedem permissão para enviar e-mails em seu nome.
*** Contudo, iremos utilizar um domínio de teste do próprio Resend, sendo ele: delivered@resend.dev**
Use o método sendEmail para disparar o e-mail
```typescript
import { FirstEmail } from '@/app/emails/wefit';
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function GET() {
try {
const { data, error } = await resend.emails.send({
from: 'delivered@resend.dev', // Note que esse e-mail é oficial de teste da Resend, não precisando confirmar o domínio
to: ['breno.lapreza@wefit.com.br'],
subject: 'Olá!',
react: FirstEmail(),
});
if (error) {
console.log(error)
return Response.json({ error }, { status: 500 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
```
Com isso, é só acessarmos a rota: [http://localhost:3000/api/send](http://localhost:3000/api/send) para realizar o teste de disparo de e-mail.
Nessa seção, será abordado como podemos criar o nosso e-mail, junto com os templates e componentes.
### Criando um e-mail
Um e-mail no contexto do React Email é a estrutura principal que será enviada ao destinatário. Ele contém o conteúdo específico e é renderizado como um HTML pronto para envio.
Crie um arquivo na pasta `emails` para armazenar seus templates. Por exemplo, `emails/FirstEmail/index.tsx`:
```typescript
import {
Html,
Head,
Preview,
Body,
Container,
Heading,
Text,
} from "@react-email/components";
export const FirstEmail = () => (
<Html>
<Head />
<Preview>Bem-vindo!</Preview>
<Body>
<Container>
<Heading>Bem-vindo!</Heading>
<Text>
Esse é um teste de e-mail utilizando o <strong>React Email!</strong>
</Text>
</Container>
</Body>
</Html>
);
```
### Criando um template
Um template é uma estrutura reutilizável e modular que define o layout e o estilo de um e-mail. Ele pode ser usado para criar variações de um mesmo e-mail, como campanhas sazonais ou mensagens específicas.
Por exemplo, você pode ter um e-mail de "Promoção" que utiliza diferentes templates para "Black Friday", "Cyber Monday" ou "Natal".
**Exemplo:** Template de Black Friday
No diretório: `emails/FirstEmail/templates/BlackFridaytTemplate/index.tsx`
```typescript
import { Container, Heading, Text, Button } from '@react-email/components';
const BlackFridayTemplate = ({ discountUrl }: { discountUrl: string }) => (
<Container>
<Heading>Black Friday chegou!</Heading>
<Text>Não perca nossas ofertas exclusivas. Descontos de até 70% em todos os produtos.</Text>
<Button href={discountUrl}>
Confira as ofertas
</Button>
</Container>
);
export default BlackFridayTemplate;
```
Com isso, podemos realizar a troca de templates para o e-mail principal e realizar envio de diversos tipos de templates diferentes.