Enviar emails com Next.js

Como enviar e-mails gratuitamente com Next.js usando Gmail e Nodemailer

by

Quer adicionar a funcionalidade de email ao seu aplicativo Next.js, como o envio de senhas de uso único (OTPs) para verificação, sem gastar nada? Muitos serviços de email exigem um domínio personalizado, mas se você está trabalhando em um projeto pessoal sem orçamento para isso, não se preocupe! Neste artigo, vamos mostrar como usar o Gmail e o Nodemailer para enviar emails com Next.js gratuitamente. Existe um porém: esses emails podem cair na caixa de spam. Vamos explicar o porquê, como configurar mesmo assim e o que você pode fazer para evitar isso.

O que você precisa para começar a enviar emails com Next.js

Antes de começar, certifique-se de que você tem:

  • Conhecimento básico de JavaScript, React, Next.js ou Node.js.
  • Uma conta Gmail. Recomenda-se criar uma nova conta para este projeto para manter tudo separado (inscreva-se em mail.google.com, caso ainda não tenha).

Por que os emails podem cair no spam (e por que este método ainda funciona)

Antes de chegarmos à configuração, vamos abordar um problema comum: emails enviados através do Gmail e Nodemailer frequentemente acabam em pastas de spam. Aqui está o porquê:

  • Sem Domínio Personalizado: O @gmail.com do Gmail não é seu para autenticar com registros SPF ou DKIM, que os provedores de email usam para verificar os remetentes. Sem isso, seus emails parecem menos confiáveis.
  • Limites SMTP: A configuração SMTP do Gmail não é otimizada para envio em massa, então os filtros de spam podem sinalizá-la.
  • Reputação: Contas Gmail gratuitas não têm a mesma reputação de remetente que serviços pagos como SendGrid.

Isso torna o método inútil? De forma alguma! Para projetos pessoais, testes ou uso em pequena escala (como enviar emails com Next.js para você mesmo ou alguns usuários), ainda é prático. Além disso, é gratuito e não precisa de um domínio. Daremos dicas mais tarde para melhorar as chances de entrega.

Passo 1: Configure sua conta Gmail

Para usar o Gmail com o Nodemailer, você precisa permitir que aplicativos externos (como o Nodemailer) enviem emails através da sua conta. Veja como, com base nas suas configurações de segurança:

Se você não usa a verificação em duas etapas

  1. Acesse as configurações da sua Conta Google.
  2. Ative “Permitir aplicativos menos seguros”.

Se você usa a verificação em duas etapas (recomendado para segurança)

  1. Acesse as configurações de senhas de aplicativos na sua Conta Google.
  2. Selecione “Mail” como o aplicativo e “Other” como o dispositivo, e então nomeie-o (ex: “Nodemailer” ou o nome do seu aplicativo).
  3. Clique em “Generate” e salve a senha de 16 caracteres do aplicativo, você precisará dela mais tarde. A senha do aplicativo gerada permite que você use o Nodemailer sem fornecer sua senha principal do Gmail.

Dicas:

  • É preferível usar uma senha de aplicativo com a verificação em duas etapas porque é mais seguro do que ativar “aplicativos menos seguros” (o que é mais arriscado e só é necessário se o seu servidor de email estiver desatualizado ou a autenticação de dois fatores não estiver ativada).
  • Se você não conseguir encontrar essas configurações, procure por “senha de aplicativo” ou “aplicativos menos seguros” na sua Conta Google.

Passo 2: Instale o Nodemailer no seu projeto Next.js

Abra um terminal no seu projeto Next.js e execute:

npm install nodemailer

Nodemailer é uma biblioteca Node.js fantástica, muito apreciada por sua simplicidade e flexibilidade no envio de emails, sem necessidade de domínio!

Passo 3: Armazene suas credenciais do Gmail com segurança

Para manter seu nome de usuário e senha do Gmail (ou senha do aplicativo) seguros, use variáveis de ambiente. Crie um arquivo .env.local na raiz do seu projeto:

GMAIL_USERNAME=your-email@gmail.com
GMAIL_PASSWORD=your-password-or-app-password
  • Use sua senha do Gmail se você ativou “aplicativos menos seguros”.
  • Use a senha do aplicativo se você escolheu a verificação em duas etapas (abordagem recomendada).

Observação: adicione .env.local ao seu arquivo .gitignore para mantê-lo privado, nunca compartilhe essas credenciais!

Passo 4: Configure uma ação de servidor ou rotas de API para enviar emails

Usando ações de servidor (preferível)

Crie um arquivo em app/actions/sendEmail.js (para o App Router):

'use server'; // Marks this as a Server Action

import nodemailer from 'nodemailer';

export async function sendEmail(formData) {
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 587,
    auth: {
      user: process.env.GMAIL_USERNAME,
      pass: process.env.GMAIL_PASSWORD,
    },
  });

  try {
    await transporter.sendMail({
      from: process.env.GMAIL_USERNAME,
      to: 'recipient@example.com', // Replace with your desired recipient
      subject: `New message from ${name}`,
      text: message,
      replyTo: email,
    });
    return { success: true, message: 'Email sent successfully!' };
  } catch (error) {
    console.error(error);
    return { success: false, message: 'Failed to send email.' };
  }
}

Usando rotas de API (alternativa)

  • Se você estiver usando as rotas de API, você pode criar app/api/sendEmail.js em vez disso: 
import nodemailer from 'nodemailer';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    const transporter = nodemailer.createTransport({
      host: 'smtp.gmail.com',
      port: 587,
      auth: {
        user: process.env.GMAIL_USERNAME,
        pass: process.env.GMAIL_PASSWORD,
      },
    });

    try {
      await transporter.sendMail({
        from: process.env.GMAIL_USERNAME,
        to: 'recipient@example.com',
        subject: `New message from ${name}`,
        text: message,
        replyTo: email,
      });
      res.status(200).json({ message: 'Email sent successfully!' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Failed to send email.' });
    }
  } else {
    res.status(405).json({ message: 'Only POST requests allowed.' });
  }
}

As ações do servidor são preferíveis porque são simplificadas e não exigem endpoints separados, mas as rotas de API funcionam tão bem se você estiver em uma configuração mais antiga ou gostar dessa abordagem.

Passo 5: Crie um formulário para acionar emails com ações do servidor

Vamos construir um formulário de contato para enviar emails com Next.js, adaptado para ações do servidor ou rotas de API.

Usando ações de servidor

Crie app/components/ContactForm.js

import { sendEmail } from '../actions/sendEmail';

export default function ContactForm() {
  const handleSubmit = async (formData) => {
    const result = await sendEmail(formData);
    if (result.success) {
      alert(result.message);
    } else {
      alert(result.message);
    }
  };

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit">Send Email</button>
    </form>
  );
}

Adicione isso a uma página, como app/page.js:

import ContactForm from './components/ContactForm';

export default function Home() {
  return (
    <div>
      <h1>Contact Us</h1>
      <ContactForm />
    </div>
  );
}

Usando rotas de API

Se você usou a abordagem de rota de API, ajuste o formulário para buscar o endpoint em vez disso. Veja como ficaria em components/ContactForm.js:

export default function ContactForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);

    try {
      const response = await fetch('/api/sendEmail', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (response.ok) {
        alert('Email sent successfully!');
      } else {
        alert('Failed to send email.');
      }
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit">Send Email</button>
    </form>
  );
}

Adicione-o a pages/index.js como antes.

Passo 6: Teste!

Vamos garantir que tudo funcione! Seja usando ações do servidor ou rotas de API, o processo de teste é semelhante.

Usando ações de servidor

  • Execute seu aplicativo Next.js com npm run dev.
  • Acesse http://localhost:3000.
  • Preencha o formulário e envie-o.
  • Verifique a caixa de entrada do destinatário (ou sua pasta “Enviados” do Gmail) para confirmar se o email chegou.

Usando rotas de API

Os passos são os mesmos, apenas certifique-se de que sua rota de API está configurada corretamente em /api/sendEmail.

Se o email não aparecer:

  • Verifique novamente seu arquivo .env.local para erros de digitação em GMAIL_USERNAME ou GMAIL_PASSWORD.
  • Verifique se suas configurações de segurança do Gmail (Passo 1) estão corretas.
  • Verifique seu terminal para mensagens de erro do Nodemailer.
  • Verifique seu terminal para mensagens de erro do Nodemailer (ex: problemas de autenticação).

Melhorando a entrega: Dicas para evitar o spam

Embora este método possa enviar emails para o spam, aqui está como aumentar suas chances de chegar à caixa de entrada:

  • Use um Assunto Claro: Evite palavras de spam como “grátis” ou todas em maiúsculas (ex: “Seu Código OTP” vs. “OTP GRÁTIS!!!”).
  • Adicione Conteúdo de Texto: Inclua uma mensagem amigável (ex: “Olá, aqui está seu OTP: 123456″).
  • Teste com seu próprio email primeiro: O Gmail confia mais em emails enviados para você mesmo.
  • Limite o envio: O Gmail limita a 100-500 emails/dia, não force a barra ou você será sinalizado.

Para projetos sé

Leave a Comment

Exit mobile version