Implementação

Formulário de Contato

// API, Resend, Zod e rate limit

Como este projeto implementa o formulário de contato: validação com Zod, rate limit, reCAPTCHA e envio com Resend. Exemplos de código para replicar no seu projeto.

O que usamos

// stack do formulário de contato

O formulário envia os dados para uma API route em Next.js. A rota valida o payload com Zod, aplica rate limit por IP, opcionalmente reCAPTCHA e envia o e-mail via Resend. Mensagens de erro vêm das traduções (i18n).

Resend (envio), Zod (validação), rate limit em memória ou Redis, reCAPTCHA v3. Código em src/app/api/contact e src/features/home/contact.

Schema Zod para nome, e-mail e mensagem

import { z } from "zod";
 
const contactSchema = z.object({
  name: z.string().min(2).max(100),
  email: z.string().email(),
  message: z.string().min(10).max(2000),
  recaptchaToken: z.string().nullable().optional(),
});
 
type ContactPayload = z.infer<typeof contactSchema>;

Fluxo da mensagem

// do formulário até o e-mail

O usuário preenche nome, e-mail e mensagem no cliente. O front envia POST para /api/contact. A API valida com Zod, verifica rate limit e reCAPTCHA (se configurado), e chama o Resend para enviar o e-mail.

Em erro (validação, rate limit ou falha no envio), a API devolve mensagem clara; o front exibe sem expor detalhes internos. Labels e mensagens vêm das traduções (a11y e i18n).

Cliente: fetch POST para /api/contact

// In the form component
const res = await fetch("/api/contact", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: formData.name,
    email: formData.email,
    message: formData.message,
  }),
});
 
if (!res.ok) {
  const data = await res.json();
  setError(data.error ?? "Send failed");
  return;
}
// Success: show message and clear form

Bibliotecas de envio

// Resend, Nodemailer, React Email

Algumas opções para enviar e-mail na API do Next: Resend (usado neste projeto), Nodemailer (SMTP direto), React Email (templates em React). Abaixo, como implementar na API route com Resend e com Nodemailer.

Libs que você pode usar:

Resend— API moderna, ótima DX, usado neste projeto. Chave em RESEND_API_KEY.
Nodemailer— Clássico para Node: envia via SMTP (Gmail, Outlook, seu servidor).
React Email— Templates de e-mail em React; gera HTML e pode usar Resend ou Nodemailer para envio.

Na API com Resend

// app/api/contact/route.ts
import { Resend } from "resend";
 
export async function POST(request: Request) {
  const { name, email, message } = await request.json();
  // In production: validate body with Zod (see API section above)
  const resend = new Resend(process.env.RESEND_API_KEY);
 
  const { error } = await resend.emails.send({
    from: "onboarding@resend.dev",
    to: "you@example.com",
    subject: `Contato: ${name}`,
    replyTo: email,
    text: message,
  });
 
  if (error) return Response.json({ error: error.message }, { status: 503 });
  return Response.json({ ok: true });
}

Na API com Nodemailer

// app/api/contact/route.ts
import nodemailer from "nodemailer";
 
export async function POST(request: Request) {
  const { name, email, message } = await request.json();
  // In production: validate body with Zod first
 
  const transport = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: Number(process.env.SMTP_PORT),
    secure: true,
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASS,
    },
  });
 
  try {
    await transport.sendMail({
      from: process.env.SMTP_FROM,
      to: "you@example.com",
      replyTo: email,
      subject: `Contato: ${name}`,
      text: message,
    });
    return Response.json({ ok: true });
  } catch (err) {
    return Response.json({ error: "Send failed" }, { status: 503 });
  }
}

API route e segurança

// POST /api/contact

A rota lê o body, valida com o schema Zod, aplica rate limit por IP e, se ok, chama o Resend com a chave em variável de ambiente. Nunca exponha RESEND_API_KEY no cliente.

Para replicar: crie a API route, defina o schema Zod, use rate limit (middleware ou lib) e configure RESEND_API_KEY no .env. Mensagens de sucesso e erro via traduções (i18n e a11y).

Esqueleto da API route (validação + Resend)

// app/api/contact/route.ts
import { Resend } from "resend";
import { contactSchema } from "@/lib/schemas/contact";
 
export async function POST(request: Request) {
  const body = await request.json();
  const parsed = contactSchema.safeParse(body);
 
  if (!parsed.success) {
    return Response.json(
      { error: "Invalid data" },
      { status: 400 }
    );
  }
 
  const resend = new Resend(process.env.RESEND_API_KEY);
  const { error } = await resend.emails.send({
    from: "you@yourdomain.com",
    to: "dest@example.com",
    subject: `Contact: ${parsed.data.name}`,
    text: parsed.data.message,
  });
 
  if (error) {
    return Response.json({ error: "Send failed" }, { status: 503 });
  }
  return Response.json({ ok: true });
}

Ver outras implementações

i18n, SEO, AI Chatbot, Analytics e Testing: todas com código aberto e documentação no repositório.

Voltar às implementações

Conteúdo relacionado

i18n Showcase — Internacionalização com Next.jsImplementação real de internacionalização (i18n) com next-intl e DeepL. Demo ao vivo com 4 idiomas, traduções tipadas, formatação de datas e moedas.

SEO Showcase — Otimização para Next.jsGuia completo de SEO com Next.js: Meta tags, Open Graph dinâmico, JSON-LD estruturado, Sitemap, Robots e comparativo Next.js vs React+Vite.

AI Chatbot com OpenAI e Vercel AI SDKComo criar um chatbot IA com streaming usando OpenAI, Vercel AI SDK e Next.js App Router. System prompt, pricing e arquitetura completa.

10 min de leitura

import { z } from "zod";

const contactSchema = z.object({

name: z.string().min(2).max(100),

email: z.string().email(),

message: z.string().min(10).max(2000),

recaptchaToken: z.string().nullable().optional(),

});

type ContactPayload = z.infer<typeof contactSchema>;

// In the form component

const res = await fetch("/api/contact", {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

name: formData.name,

email: formData.email,

message: formData.message,

}),

});

if (!res.ok) {

const data = await res.json();

setError(data.error ?? "Send failed");

return;

}

// Success: show message and clear form

// app/api/contact/route.ts

import { Resend } from "resend";

export async function POST(request: Request) {

const { name, email, message } = await request.json();

// In production: validate body with Zod (see API section above)

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

const { error } = await resend.emails.send({

from: "onboarding@resend.dev",

to: "you@example.com",

subject: `Contato: ${name}`,

replyTo: email,

text: message,

});

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

return Response.json({ ok: true });

}

// app/api/contact/route.ts

import nodemailer from "nodemailer";

export async function POST(request: Request) {

const { name, email, message } = await request.json();

// In production: validate body with Zod first

const transport = nodemailer.createTransport({

host: process.env.SMTP_HOST,

port: Number(process.env.SMTP_PORT),

secure: true,

auth: {

user: process.env.SMTP_USER,

pass: process.env.SMTP_PASS,

});

try {

await transport.sendMail({

from: process.env.SMTP_FROM,

to: "you@example.com",

replyTo: email,

subject: `Contato: ${name}`,

text: message,

});

return Response.json({ ok: true });

} catch (err) {

return Response.json({ error: "Send failed" }, { status: 503 });

}

// app/api/contact/route.ts

import { Resend } from "resend";

import { contactSchema } from "@/lib/schemas/contact";

export async function POST(request: Request) {

const body = await request.json();

const parsed = contactSchema.safeParse(body);

if (!parsed.success) {

return Response.json(

{ error: "Invalid data" },

{ status: 400 }

);

}

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

const { error } = await resend.emails.send({

from: "you@yourdomain.com",

to: "dest@example.com",

subject: `Contact: ${parsed.data.name}`,

text: parsed.data.message,

});

if (error) {

return Response.json({ error: "Send failed" }, { status: 503 });

}

return Response.json({ ok: true });

}