Como Usar a API Resend: Guia Para Iniciantes

O e-mail é um componente crítico das aplicações web modernas, usado para tudo, desde o onboarding de usuários e notificações até redefinições de senha e campanhas de marketing. No entanto, construir e gerenciar uma infraestrutura de envio de e-mail confiável pode ser complexo e demorado. É aqui que entram os serviços de API de e-mail como o Resend.

O Resend oferece uma plataforma amigável para desenvolvedores, projetada para simplificar o processo de envio de e-mails transacionais e de marketing. Ele fornece APIs robustas, análises detalhadas e excelente entregabilidade, permitindo que os desenvolvedores se concentrem na construção de suas aplicações em vez de se preocuparem com a infraestrutura de e-mail.

Este guia abrangente irá guiá-lo por tudo o que você precisa saber para começar a usar a API do Resend, desde a compreensão de seus conceitos principais e preços até a integração com vários frameworks e plataformas populares.

💡

Quer uma ótima ferramenta de Teste de API que gera Documentação de API bonita?

Quer uma plataforma integrada e Tudo-em-Um para sua Equipe de Desenvolvedores trabalhar em conjunto com máxima produtividade?

O Apidog entrega todas as suas demandas e substitui o Postman a um preço muito mais acessível!

button

O que é Resend?

Resend é uma plataforma de API de e-mail construída para desenvolvedores. Ela visa fornecer uma experiência de desenvolvedor superior em comparação com provedores de serviços de e-mail (ESPs) mais antigos. Os principais recursos incluem:

API Moderna: Uma API RESTful limpa e fácil de integrar em qualquer aplicação.
Alta Entregabilidade: Foca em garantir que seus e-mails cheguem à caixa de entrada, não à pasta de spam, através de recursos como verificação de domínio personalizado (DKIM, SPF, DMARC), IPs dedicados (como um add-on) e gerenciamento automático de lista de supressão.
Integrações com Frameworks: Oferece SDKs oficiais e guias para frameworks populares como Node.js, Next.js, Python, Ruby, PHP, Go e mais.
Integração com React Email: Integra-se perfeitamente com o React Email, permitindo que você construa modelos de e-mail bonitos e responsivos usando componentes React.
Webhooks: Fornece notificações em tempo real sobre eventos de e-mail como entrega, bounces, aberturas, cliques e reclamações de spam.
Análises Detalhadas: Oferece insights sobre o desempenho do e-mail através de um painel amigável.
Foco no Desenvolvedor: Projetado com os desenvolvedores em mente, oferecendo documentação clara, SDKs úteis e ferramentas como e-mails de teste para facilitar o desenvolvimento e a depuração.

Resend se posiciona como uma alternativa mais moderna e centrada no desenvolvedor para players estabelecidos como SendGrid, Mailgun ou AWS SES, focando na facilidade de uso, confiabilidade e boa integração com fluxos de trabalho de desenvolvimento web modernos.

Qual é o preço do Resend?

Resend oferece uma estrutura de preços em camadas baseada no número de e-mails enviados por mês, com considerações separadas para e-mails transacionais e de marketing (embora a página de preços detalhe principalmente os planos transacionais).

Aqui está um resumo dos planos de e-mail transacional (no momento da escrita):

Plano Gratuito:

Custo: $0 / mês
E-mails: Até 3.000 e-mails por mês
Limite Diário: 100 e-mails por dia
Domínios: 1 domínio personalizado
Retenção de Dados: 1 dia
Suporte: Suporte por Ticket
Principais Recursos: API RESTful, SMTP Relay, SDKs, Rastreamento de Abertura/Link, Integração com React Email, Lista de Supressão Automática, Autenticação DKIM/SPF/DMARC, 1 Endpoint de Webhook.
Limitações: Sem Single Sign-On (SSO), Sem IPs Dedicados, Domínios e envio diário limitados.

Plano Pro:

Custo: $20 / mês
E-mails: Até 50.000 e-mails por mês (com cobranças de excesso aplicadas além disso)
Limite Diário: Sem limite diário
Domínios: 10 domínios personalizados
Retenção de Dados: 3 dias
Suporte: Suporte por Ticket
Principais Recursos: Todos os recursos do plano Gratuito, mais SSO, 10 Endpoints de Webhook.
Limitações: Sem IPs Dedicados incluídos (disponível como add-on posteriormente), Sem suporte Slack.

Plano Scale:

Custo: $90 / mês
E-mails: Até 100.000 e-mails por mês (com cobranças de excesso)
Limite Diário: Sem limite diário
Domínios: 1.000 domínios personalizados
Retenção de Dados: 7 dias
Suporte: Suporte Slack e Ticket
Principais Recursos: Todos os recursos do plano Pro, mais IP Dedicado disponível como um add-on ($30/mês, requer >500 e-mails/dia).
Limitações: IPs Dedicados são um add-on.

Plano Enterprise:

Custo: Preço personalizado
E-mails: Volume personalizado
Limite Diário: Sem limite diário
Domínios: Flexível
Retenção de Dados: Flexível
Suporte: Suporte Prioritário, SLA de Resposta Urgente, Expertise em Entregabilidade
Principais Recursos: Todos os recursos do plano Scale, mais Aquecimento de IP Dedicado, Insights de Entregabilidade, Webhooks Flexíveis, SSO incluído.

Considerações Chave:

Excesso: Enviar mais e-mails do que seu plano permite incorrerá em custos adicionais por e-mail.
IPs Dedicados: Disponível como um add-on para os planos Scale e Enterprise por uma taxa mensal adicional, recomendado para remetentes de alto volume preocupados com a reputação de IP compartilhado.
Retenção de Dados: A duração pela qual o Resend armazena logs e detalhes sobre seus e-mails enviados varia por plano.
E-mails de Marketing: A página de preços possui um botão para E-mails de Marketing, sugerindo que planos ou estruturas de preços diferentes podem ser aplicados, mas os detalhes focaram em e-mails transacionais no conteúdo extraído. Verifique o site do Resend para os preços mais atuais de E-mail de Marketing.

O plano Gratuito é generoso o suficiente para pequenos projetos ou fins de teste. Os planos Pro e Scale atendem a aplicações em crescimento com volumes de e-mail e requisitos de recursos crescentes. O plano Enterprise oferece soluções personalizadas para operações em larga escala.

Começando com o Resend

Antes de poder enviar e-mails, você precisa configurar sua conta Resend e configurar seu domínio de envio.

1. Inscreva-se e Crie uma Chave de API

Vá para o site do Resend e inscreva-se para uma conta.
Navegue até a seção API Keys (Chaves de API) no seu painel do Resend (https://resend.com/api-keys).
Clique em Create API Key (Criar Chave de API).
Dê à sua chave de API um nome descritivo (por exemplo, my-app-key).
Escolha o nível de permissão:
Full access: Permite todas as ações da API (criar, excluir, obter, atualizar recursos). Use com cautela, geralmente necessário apenas para tarefas de gerenciamento de backend.
Sending access: Permite apenas o envio de e-mails. Esta é a permissão recomendada para a lógica de envio da sua aplicação. Você pode opcionalmente restringir esta chave para enviar apenas de um domínio verificado específico.
Clique em Create (Criar).
Importante: O Resend mostrará a chave de API apenas uma vez. Copie-a imediatamente e armazene-a de forma segura (por exemplo, em uma variável de ambiente, gerenciador de segredos). Não a comite diretamente em seu código-fonte.

2. Verifique seu Domínio

Para enviar e-mails que pareçam profissionais e evitem filtros de spam, você deve verificar um domínio que você possui. Enviar de domínios não verificados ou endereços padrão como onboarding@resend.dev é adequado apenas para testes iniciais.

Vá para a seção Domains (Domínios) no seu painel do Resend (https://resend.com/domains).
Clique em Add Domain (Adicionar Domínio) e insira o domínio do qual você deseja enviar e-mails (por exemplo, suaempresa.com).
Escolha seu provedor de DNS na lista ou selecione 'Other' (Outro).
O Resend fornecerá registros DNS (geralmente MX, TXT para SPF e CNAME/TXT para DKIM) que você precisa adicionar às configurações de DNS do seu domínio.
SPF (Sender Policy Framework): Especifica quais servidores de e-mail estão autorizados a enviar e-mail em nome do seu domínio.
DKIM (DomainKeys Identified Mail): Adiciona uma assinatura digital aos e-mails, permitindo que os servidores receptores verifiquem se o e-mail não foi adulterado e se originou de um servidor autorizado.
Faça login no seu registrador de domínio ou provedor de DNS (por exemplo, GoDaddy, Cloudflare, Namecheap) e adicione os registros fornecidos pelo Resend.
As alterações de DNS podem levar algum tempo para propagar (minutos a horas, às vezes até 48 horas).
Assim que os registros forem adicionados, volte ao painel de Domínios do Resend e clique no botão Verify (Verificar) ao lado do seu domínio. O Resend verificará se os registros DNS estão configurados corretamente. Uma vez verificado, o status será atualizado e você poderá começar a enviar e-mails de endereços associados a esse domínio (por exemplo, suporte@suaempresa.com, noreply@suaempresa.com).

3. Enviando E-mails de Teste

Durante o desenvolvimento, é crucial testar o envio de e-mail sem afetar a reputação do seu domínio ou enviar acidentalmente para usuários reais. O Resend fornece endereços de e-mail especiais para testar diferentes cenários:

Teste Entregue: Envie para delivered@resend.dev. Isso simula um e-mail entregue com sucesso.
Teste Bounced: Envie para bounced@resend.dev. Isso simula um bounce hard (por exemplo, o endereço do destinatário não existe), acionando um evento de bounce.
Teste Marcado como Spam: Envie para complained@resend.dev. Isso simula um destinatário marcando seu e-mail como spam, acionando um evento de reclamação.

O uso desses endereços de teste permite verificar sua integração e testar manipuladores de webhook para eventos de bounce e reclamação de forma segura.

Integrando o Resend com Frameworks

O Resend fornece SDKs oficiais e métodos de integração diretos para várias linguagens e frameworks. Abordaremos alguns exemplos populares com base na documentação fornecida. O conceito principal geralmente envolve:

Instalar o SDK do Resend (se disponível) ou usar requisições HTTP padrão.
Inicializar o cliente Resend com sua chave de API (carregada de forma segura, geralmente a partir de variáveis de ambiente).
Chamar o método emails.send (ou equivalente) com parâmetros como from, to, subject e html ou react.

Enviando com Next.js

Next.js é um framework React popular. O Resend se integra bem, especialmente com o React Email.

1. Instalar:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. Criar Modelo de E-mail (Opcional, mas recomendado):Use React Email ou crie um componente React simples para o corpo do seu e-mail.

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

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

3. Criar Rota de API:Crie um manipulador de rota de API para enviar o e-mail.

App Router: app/api/send/route.ts
Pages Router: pages/api/send.ts

// app/api/send/route.ts (Exemplo App Router)
import { EmailTemplate } from '../../../components/email-template'; // Ajuste o caminho se necessário
import { Resend } from 'resend';

// Certifique-se de que RESEND_API_KEY esteja definido em seu .env.local
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>', // Use seu domínio verificado
      to: ['delivered@resend.dev'], // Substitua pelo destinatário ou endereço de teste
      subject: 'Hello from Resend and Next.js!',
      react: EmailTemplate({ firstName: 'Test' }), // Passe props para seu modelo
      // Alternativamente, use `html`:
      // html: '<strong>It works!</strong>'
    });

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

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

// pages/api/send.ts (Exemplo Pages Router - adapte imports/response)
// import type { NextApiRequest, NextApiResponse } from 'next';
// import { EmailTemplate } from '../../components/EmailTemplate';
// import { Resend } from 'resend';
//
// const resend = new Resend(process.env.RESEND_API_KEY);
//
// export default async (req: NextApiRequest, res: NextApiResponse) => {
//   try { // Adicionado try...catch para melhor tratamento de erros
//     const { data, error } = await resend.emails.send({
//       from: 'Your Name <you@yourverifieddomain.com>',
//       to: ['delivered@resend.dev'],
//       subject: 'Hello world',
//       react: EmailTemplate({ firstName: 'John' }),
//     });
//
//     if (error) {
//       return res.status(400).json(error);
//     }
//
//     res.status(200).json(data);
//   } catch (e) {
//      res.status(500).json({ error: 'Internal Server Error' });
//   }
// };

4. Acionar:Chame este endpoint de API do seu frontend (por exemplo, após um envio de formulário) usando fetch ou uma biblioteca como axios. Lembre-se de substituir os valores de placeholder pelo seu domínio verificado real e listas de destinatários.

Enviando com Astro

Astro é um construtor de site estático moderno que também suporta renderização no lado do servidor (SSR).

1. Instalar Resend:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. Instalar Adaptador SSR:Astro precisa de um adaptador SSR para executar código no lado do servidor sob demanda. Instale um adequado para o seu destino de implantação (por exemplo, @astrojs/node, @astrojs/vercel, @astrojs/cloudflare).

npx astro add node # Exemplo para adaptador Node.js

Siga as instruções de configuração do adaptador em seu astro.config.mjs.

3. Adicionar Chave de API:Armazene sua RESEND_API_KEY em seu arquivo .env.

4. Criar Ação Astro:Use Astro Actions (recurso experimental no momento da escrita, verifique a documentação do Astro para o status atual) ou endpoints de API padrão.

// src/actions/index.ts (Usando Astro Actions)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';

// Certifique-se de que RESEND_API_KEY esteja disponível via import.meta.env
const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  send: defineAction({
    // Exemplo: Defina validação de entrada se necessário
    // input: z.object({ email: z.string().email() }),
    handler: async (/* { email } - se estiver usando input */) => {
      try { // Adicionado try...catch
        const { data, error } = await resend.emails.send({
          from: 'Your Name <you@yourverifieddomain.com>',
          to: ['delivered@resend.dev'], // Substitua pelo destinatário
          subject: 'Hello from Resend and Astro!',
          html: '<strong>Astro works!</strong>',
          // Você também pode usar modelos React se configurar React no Astro
          // react: <YourAstroCompatibleReactEmail firstName="Astro" />
        });

        if (error) {
          console.error("Resend Error:", error); // Log do erro
          // Lançar ActionError ajuda o Astro a lidar com erros graciosamente
          throw new ActionError({
            code: 'BAD_REQUEST', // Ou seja mais específico com base no erro
            message: error.message || 'Failed to send email',
          });
        }

        return data; // Retorna dados de sucesso
      } catch (e) {
         console.error("Handler Error:", e);
         // Relança ou lança um novo ActionError
         throw new ActionError({
             code: 'INTERNAL_SERVER_ERROR',
             message: 'An unexpected error occurred.',
         });
      }
    },
  }),
};

// Alternativa: Endpoint de API (por exemplo, src/pages/api/send.ts)
// import type { APIRoute } from 'astro';
// import { Resend } from 'resend';
//
// const resend = new Resend(import.meta.env.RESEND_API_KEY);
//
// export const POST: APIRoute = async ({ request }) => {
//   // const body = await request.json(); // Se os dados vierem do corpo da requisição
//   try {
//     const { data, error } = await resend.emails.send({ /* ... parâmetros do email ... */ });
//     if (error) {
//       return new Response(JSON.stringify(error), { status: 400 });
//     }
//     return new Response(JSON.stringify(data), { status: 200 });
//   } catch (e) {
//     return new Response(JSON.stringify({ message: "Server Error"}), { status: 500 });
//   }
// }

5. Acionar:Chame a ação ou o endpoint de seus componentes ou páginas Astro, geralmente dentro de um manipulador de envio de formulário.

Enviando com Bun

Bun é um runtime JavaScript rápido com bundler, transpiler, task runner e cliente npm integrados.

1. Instalar:

bun install resend

2. Criar Modelo de E-mail (Opcional):Semelhante ao Next.js, você pode criar um arquivo .tsx para seu modelo de e-mail React.

// email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

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

3. Criar Script de Servidor Bun:Crie um script (por exemplo, index.tsx) para executar um servidor HTTP simples usando Bun.

// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // Assumindo que está no mesmo diretório

// Carrega a chave da API a partir de variáveis de ambiente
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
  console.error("Error: RESEND_API_KEY environment variable not set.");
  process.exit(1); // Sai se a chave estiver faltando
}
const resend = new Resend(resendApiKey);

const server = Bun.serve({
  port: 3000,
  async fetch(req) { // Adicionado argumento 'req'
    // Opcional: Verificar método da requisição, caminho, etc.
    // if (new URL(req.url).pathname !== '/send') {
    //   return new Response("Not Found", { status: 404 });
    // }
    // if (req.method !== 'POST') {
    //    return new Response("Method Not Allowed", { status: 405 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Your Name <you@yourverifieddomain.com>',
        to: ['delivered@resend.dev'],
        subject: 'Hello from Resend and Bun!',
        react: EmailTemplate({ firstName: 'Bun User' }),
        // Ou use html: '<strong>Bun works!</strong>'
      });

      if (error) {
        console.error("Resend Error:", error);
        // Retorna uma resposta de erro JSON apropriada
        return new Response(JSON.stringify({ error: error.message || 'Failed to send email' }), {
          status: 500, // Ou 400 dependendo do tipo de erro
          headers: { 'Content-Type': 'application/json' },
        });
      }

      // Retorna resposta de sucesso
      return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      });

    } catch (e) {
        console.error("Server Error:", e);
        return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
        });
    }
  },
  error(error) { // Adicionado manipulador de erro básico para o próprio servidor
      return new Response(`<pre>${error}\\\\n${error.stack}</pre>`, {
          headers: { "Content-Type": "text/html" },
      });
  },
});

console.log(`Listening on <http://localhost>:${server.port} ...`);

4. Executar:Inicie o servidor usando RESEND_API_KEY=sua_chave_api bun run index.tsx. Acessar http://localhost:3000 (ou acionar a rota/método específico que você definiu) enviará o e-mail.

Enviando com Nuxt

Nuxt é um framework Vue.js popular.

1. Instalar:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. Criar Rota de Servidor:Nuxt usa um diretório server/ para lógica de backend. Crie um arquivo como server/api/send.post.ts (o .post indica que ele manipula requisições POST).

// server/api/send.post.ts
import { Resend } from 'resend';

// Acessa a Chave de API de forma segura (por exemplo, via runtimeConfig em nuxt.config.ts)
// Veja: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // Assumindo que a chave está definida na runtime config

export default defineEventHandler(async (event) => {
  // Opcional: Ler corpo se os dados vierem da requisição
  // const body = await readBody(event);

  try {
    const data = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend and Nuxt!',
      html: '<strong>Nuxt works!</strong>',
      // Você pode integrar modelos de e-mail Vue (por exemplo, usando vue-email)
      // Veja: <https://github.com/Dave136/vue-email>
    });

    // Nuxt 3 lida automaticamente com o retorno dos dados como JSON
    return data;

  } catch (error: any) { // Captura tipos de erro específicos se possível
    console.error("Resend Error:", error);
    // Lança um erro que o Nuxt pode manipular, definindo o código de status
    throw createError({
        statusCode: 400, // Ou 500
        statusMessage: 'Failed to send email',
        data: error // Opcionalmente inclui detalhes do erro
    });
  }
});

// Em seu nuxt.config.ts, defina runtimeConfig:
// export default defineNuxtConfig({
//   runtimeConfig: {
//     resendApiKey: process.env.NUXT_RESEND_API_KEY, // Apenas no lado do servidor
//     public: {
//       // Chaves públicas acessíveis no lado do cliente
//     }
//   }
// })
// E defina NUXT_RESEND_API_KEY em seu .env

3. Acionar:Chame o endpoint /api/send (usando o método POST) de suas páginas ou componentes Nuxt usando $fetch ou useFetch.

Enviando com Vercel Functions

Vercel Functions são funções serverless que se integram perfeitamente com Next.js ou podem ser usadas de forma independente. O exemplo de Next.js acima já demonstra o uso em um ambiente Vercel. Se estiver usando Vercel Functions sem Next.js (por exemplo, com um gerador de site estático ou outro framework implantado no Vercel), a abordagem é semelhante:

1. Criar Função:Crie um arquivo no diretório api/ do seu projeto (por exemplo, api/send.ts).

// api/send.ts (Exemplo para Vercel Function padrão)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // Você pode precisar instalar o resend

// Certifique-se de que RESEND_API_KEY esteja definido como uma Variável de Ambiente Vercel
const resendApiKey = process.env.RESEND_API_KEY;

if (!resendApiKey) {
  console.error("RESEND_API_KEY is not set");
  // Não prossiga se a chave estiver faltando em produção
}

const resend = new Resend(resendApiKey);

export default async function handler(
  request: VercelRequest,
  response: VercelResponse,
) {
  // Recomendado: Verificar o método POST
  if (request.method !== 'POST') {
    return response.status(405).json({ message: 'Method Not Allowed' });
  }

  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend & Vercel Functions!',
      html: '<strong>It works on Vercel!</strong>',
      // Modelos React podem ser usados se sua função empacotar React
    });

    if (error) {
      console.error('Resend Error:', error);
      return response.status(400).json(error);
    }

    return response.status(200).json(data);

  } catch (e) {
    console.error('Handler Error:', e);
    return response.status(500).json({ message: 'Internal Server Error' });
  }
}

2. Configurar Variável de Ambiente:Adicione sua RESEND_API_KEY como uma Variável de Ambiente nas configurações do seu projeto Vercel.

3. Implantar:Implante seu projeto usando a CLI do Vercel (vercel) ou integração Git.

4. Acionar:Faça uma requisição POST para a URL da função implantada (por exemplo, https://seu-projeto.vercel.app/api/send).

Enviando com Supabase Edge Functions

Supabase Edge Functions são executadas no Deno Deploy, perto de seus usuários. Elas usam Deno e APIs Web padrão como fetch. O Resend ainda não tem um SDK oficial para Deno ainda, então você usa fetch diretamente.

1. Criar Função Supabase:Use a CLI do Supabase:

supabase functions new resend-email-sender # Escolha um nome
cd supabase/functions/resend-email-sender

2. Editar Manipulador:Modifique o arquivo index.ts gerado.

// supabase/functions/resend-email-sender/index.ts
import { serve } from "<https://deno.land/std@0.177.0/http/server.ts>"; // Use a versão apropriada do std

// Acessa a Chave de API de forma segura via variáveis de ambiente do Supabase Edge Function
const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');

// Manipulador de requisição básico
const handler = async (_request: Request): Promise<Response> => {
  if (!RESEND_API_KEY) {
      console.error("RESEND_API_KEY environment variable not set.");
      return new Response(JSON.stringify({ error: "Server configuration error" }), {
          status: 500, headers: { 'Content-Type': 'application/json' }
      });
  }

  // Opcional: Verificar método, cabeçalhos ou corpo da _request se necessário

  try {
    const res = await fetch('<https://api.resend.com/emails>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${RESEND_API_KEY}` // Use a chave aqui
        },
        body: JSON.stringify({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // Substitua o destinatário
            subject: 'Hello from Resend & Supabase Edge!',
            html: '<strong>It works! Edge Functions are cool.</strong>',
            // Nota: Enviar componentes React diretamente não é viável aqui
            // sem uma etapa de build na edge function para renderizá-los em HTML.
            // Envie HTML pré-renderizado ou texto simples.
        })
    });

    // Lida com possíveis respostas não OK da API do Resend
    if (!res.ok) {
        const errorData = await res.json().catch(() => ({ message: 'Failed to parse Resend error response' }));
        console.error("Resend API Error:", res.status, errorData);
        return new Response(JSON.stringify({ error: 'Failed to send email via Resend', details: errorData }), {
            status: res.status, // Encaminha o código de status do Resend
            headers: { 'Content-Type': 'application/json' },
        });
    }

    // Analisa a resposta de sucesso
    const data = await res.json();

    // Retorna resposta de sucesso
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
    });

  } catch (error) {
      console.error("Edge Function Error:", error);
      return new Response(JSON.stringify({ error: 'Internal Server Error in Edge Function' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
      });
  }
};

// Inicia o servidor
serve(handler);
console.log("Supabase Edge Function 'resend-email-sender' is running...");

3. Definir Variável de Ambiente:Defina a RESEND_API_KEY localmente usando supabase secrets set RESEND_API_KEY sua_chave_real e também defina-a nas configurações de Função do seu projeto Supabase para implantação.

4. Implantar e Invocar:

# Testar localmente (opcional)
supabase functions serve resend-email-sender --no-verify-jwt

# Implantar
supabase functions deploy resend-email-sender --no-verify-jwt

Invoque a função usando sua URL, tipicamente via uma chamada da biblioteca cliente Supabase do seu frontend ou de outro serviço de backend.

Enviando com Cloudflare Workers

Cloudflare Workers são funções serverless executadas na rede de borda da Cloudflare. O SDK Node.js do Resend geralmente pode funcionar em ambientes Workers com o empacotamento apropriado.

1. Configurar Projeto Worker:Inicialize um projeto Worker, frequentemente usando npm create cloudflare. Certifique-se de que esteja configurado para módulos e empacotamento (por exemplo, usando Wrangler com Webpack ou esbuild).

2. Instalar Resend:

npm install resend
# or yarn/pnpm

3. Criar Modelo de E-mail (Opcional):Se estiver usando React, crie seu arquivo de modelo (.tsx).

4. Editar Script Worker:Modifique seu arquivo principal do worker (por exemplo, src/index.ts ou src/index.tsx se estiver usando React).

// src/index.tsx (Exemplo usando React)
import { Resend } from 'resend';
// Assumindo que você tem um componente de modelo React
import { EmailTemplate } from './emails/email-template'; // Ajuste o caminho

// Define as variáveis de ambiente esperadas para segurança de tipo
export interface Env {
  RESEND_API_KEY: string;
}

export default {
  async fetch(
    request: Request,
    env: Env, // Acessa variáveis de ambiente via 'env'
    ctx: ExecutionContext
  ): Promise<Response> {

    // Instancia o Resend usando a chave de API das variáveis de ambiente
    const resend = new Resend(env.RESEND_API_KEY);

    // Opcional: Verificar método da requisição, caminho da URL, etc.
    // Exemplo: Permitir apenas requisições POST para um caminho específico
    // const url = new URL(request.url);
    // if (url.pathname !== '/send-email' || request.method !== 'POST') {
    //   return new Response('Not Found or Method Not Allowed', { status: 404 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Your Name <you@yourverifieddomain.com>',
        to: ['delivered@resend.dev'], // Substitua o destinatário
        subject: 'Hello from Resend & Cloudflare Workers!',
        // Usa o componente React se aplicável
        react: <EmailTemplate firstName="Worker User" />,
        // Ou usa HTML
        // html: '<strong>It works from the Edge!</strong>',
      });

      if (error) {
        console.error("Resend Error:", JSON.stringify(error));
        return Response.json({ error: 'Failed to send email via Resend' }, { status: 400 });
      }

      return Response.json(data);

    } catch (e) {
      console.error("Worker Error:", e);
      // Loga a pilha de erro se possível
      if (e instanceof Error) {
         console.error(e.stack);
      }
      return Response.json({ error: 'Internal Server Error in Worker' }, { status: 500 });
    }
  },
} // satisfies ExportedHandler<Env>; // Opcional: Usa satisfies para melhor verificação de tipo

5. Configurar Variável de Ambiente:Defina sua RESEND_API_KEY como um segredo para seu Worker usando Wrangler:

npx wrangler secret put RESEND_API_KEY
# Cole sua chave quando solicitado

6. Implantar:

npx wrangler deploy # Ou 'wrangler dev' para teste local

Invoque o Worker usando a URL atribuída a ele.

Enviando com AWS Lambda

A extração da página de documentação do AWS Lambda excedeu o tempo limite, então esta seção é baseada em princípios gerais.

Enviar e-mails do AWS Lambda usando Resend segue um padrão semelhante:

1. Configurar Função Lambda:Crie uma função Lambda usando seu runtime preferido (Node.js é comum e funciona bem com o SDK do Resend). Certifique-se de que sua Lambda tenha acesso à internet (por exemplo, configurada dentro de uma VPC com um NAT Gateway ou usando configurações padrão da VPC que permitem saída).

2. Instalar SDK do Resend:Inclua resend no pacote de implantação da sua função (por exemplo, em package.json e execute npm install antes de compactar ou use Lambda Layers).

3. Armazenar Chave de API de Forma Segura:Use o AWS Secrets Manager ou o AWS Systems Manager Parameter Store para armazenar sua RESEND_API_KEY. Conceda à função de execução da sua Lambda permissão para ler este segredo. Não codifique a chave diretamente no código da função Lambda.

4. Escrever Código do Manipulador Lambda (Exemplo Node.js):

// lambda_function.js (Exemplo Node.js)
const { Resend } = require('resend');
// Clientes do AWS SDK (se estiver obtendo a chave do Secrets Manager/Parameter Store)
const { SecretsManagerClient, GetSecretValueCommand } = require("@aws-sdk/client-secrets-manager"); // V3 SDK

let resend; // Inicializa fora do manipulador para potencial reutilização

async function getApiKey() {
    // Substitua pelo nome/ARN do seu segredo e região
    const secretName = "your/resend/api/key/secret";
    const client = new SecretsManagerClient({ region: "your-region" });
    try {
        const command = new GetSecretValueCommand({ SecretId: secretName });
        const response = await client.send(command);
        if ('SecretString' in response) {
            // Assumindo que o segredo armazena a chave diretamente ou como JSON como {"apiKey": "re_..."}
            const secret = JSON.parse(response.SecretString);
            return secret.apiKey; // Ajuste a análise com base em como você a armazenou
        }
        throw new Error("API Key not found in secret string");
    } catch (error) {
        console.error("Error retrieving API Key from Secrets Manager:", error);
        throw error; // Relança para sinalizar falha
    }
}

exports.handler = async (event, context) => {
    // Opcional: Analisar dados do evento se necessário (por exemplo, de um trigger do API Gateway)
    // const body = JSON.parse(event.body || '{}');
    // const recipient = body.to;

    try {
        if (!resend) {
            const apiKey = await getApiKey();
            if (!apiKey) {
                return { statusCode: 500, body: JSON.stringify({ message: "API Key configuration error" }) };
            }
            resend = new Resend(apiKey);
        }

        const { data, error } = await resend.emails.send({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // Usa destinatário do evento ou valor fixo
            subject: 'Hello from Resend & AWS Lambda!',
            html: '<strong>Lambda email sent successfully!</strong>',
            // React requer uma etapa de build ou configuração de renderização server-side dentro da Lambda
        });

        if (error) {
            console.error('Resend Error:', error);
            return {
                statusCode: 400, // Ou status apropriado com base no erro
                body: JSON.stringify(error),
            };
        }

        return {
            statusCode: 200,
            body: JSON.stringify(data),
             headers: { 'Content-Type': 'application/json' },
        };

    } catch (e) {
        console.error('Lambda Handler Error:', e);
        return {
            statusCode: 500,
            body: JSON.stringify({ message: 'Internal Server Error' }),
        };
    }
};

5. Configurar Trigger:Configure um trigger para sua função Lambda (por exemplo, API Gateway para requisições HTTP, fila SQS, evento EventBridge).

6. Implantar:Implante sua função Lambda e suas dependências.

Usando React Email com Resend

Uma grande vantagem do Resend é sua integração perfeita com o React Email. O React Email permite que você construa modelos de e-mail bonitos e responsivos usando componentes e sintaxe padrão do React.

Benefícios:

Baseado em Componentes: Estruture e-mails como aplicações web usando componentes reutilizáveis.
Segurança de Tipo: Use TypeScript para modelos mais robustos.
Desenvolvimento Local: Desenvolva e visualize e-mails localmente em seu navegador.
Sem Linguagens de Template Complexas: Evite sintaxe de template de e-mail proprietária ou complexa.

Configuração (Baseado na Documentação do React Email - pode variar ligeiramente):

Instalar: Adicione react-email e seus componentes principais ao seu projeto. Você provavelmente também precisará de resend se estiver enviando através deles.

npm install react-email @react-email/components resend
# or yarn/pnpm

Criar Modelos de E-mail: Crie arquivos .tsx para seus e-mails, geralmente em um diretório dedicado emails/.

// emails/welcome.tsx
import { Html, Button, Text } from '@react-email/components';
import * as React from 'react';

interface WelcomeEmailProps {
  name: string;
  signupLink: string;
}

export const WelcomeEmail: React.FC<Readonly<WelcomeEmailProps>> = ({ name, signupLink }) => (
  <Html>
    <Text>Hello {name},</Text>
    <Text>Welcome aboard! Click the button below to get started.</Text>
    <Button href={signupLink}>Complete Signup</Button>
  </Html>
);

export default WelcomeEmail; // Exportação padrão é frequentemente útil

Integrar com a Lógica de Envio: Em sua rota de API de backend ou função serverless, importe o componente de e-mail e passe-o para a opção react do Resend.

// Exemplo em uma Rota de API Next.js (app/api/send-welcome/route.ts)
import { Resend } from 'resend';
import WelcomeEmail from '../../../emails/welcome'; // Ajuste o caminho

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

export async function POST(request: Request) {
  try {
    const body = await request.json(); // Assumindo { email: '...', name: '...' } no corpo
    const signupUrl = "<https://yoursite.com/signup-step2>"; // Exemplo de URL

    const { data, error } = await resend.emails.send({
      from: 'Your App <welcome@yourverifieddomain.com>',
      to: [body.email],
      subject: 'Welcome to Our Platform!',
      // Passa o componente React diretamente
      react: WelcomeEmail({ name: body.name, signupLink: signupUrl }),
    });

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

O Resend (e o processo de build do React Email, se usado de forma independente) lida com a renderização do componente React para HTML seguro para e-mail nos bastidores. Isso melhora significativamente a experiência do desenvolvedor para criar e manter modelos de e-mail.

Conclusão

Resend oferece uma solução moderna e focada no desenvolvedor para envio de e-mails. Sua API limpa, excelentes integrações com frameworks (especialmente com React Email), foco na entregabilidade e recursos úteis como e-mails de teste e webhooks o tornam uma escolha atraente para aplicações de todos os tamanhos.

Seguindo os passos descritos neste guia—configurando sua conta, verificando seu domínio, escolhendo o método de integração correto para seu framework e aproveitando ferramentas como React Email—você pode integrar de forma rápida e confiável funcionalidades robustas de e-mail em seus projetos. Lembre-se de sempre lidar com chaves de API de forma segura e monitorar sua atividade de envio através do painel do Resend e webhooks para garantir a entregabilidade e a experiência do usuário ideais.

💡

button