WhatsApp no v0: rota de servidor Next.js e chaves em variáveis de ambiente

Passo a passo

1. 1

   Descubra onde o v0 guarda variáveis de ambiente

   A documentação que li (visão geral, 11/11/2026) não cobre variáveis de ambiente, e a página de variáveis que tentei abrir não existe. Procure o menu de variáveis do projeto na própria ferramenta ou nas configurações do projeto na Vercel após o deploy, e confirme lá antes de colar qualquer chave.

2. 2

   Cadastre os três valores sem prefixo público

   Crie ZAPZAP_API_KEY, ZAPZAP_API_SECRET e ZAPZAP_INSTANCE_ID, sem NEXT_PUBLIC_ no nome. As chaves vêm de Settings > API em app.zapzapapi.com e a instância é um número conectado por QR code.

3. 3

   Peça a rota de servidor

   Prompt: "Crie um route handler POST em app/api/whatsapp/route.ts que valide number (10 a 15 dígitos) e text, e chame https://api.zapzapapi.com/api/v1/{instanceId}/send/text com x-api-key e x-api-secret de process.env. Não exponha as chaves ao cliente."

4. 4

   Ligue o formulário à rota

   O componente chama fetch('/api/whatsapp', { method: 'POST', ... }) com number e text. Adicione limite de uso por IP ou por usuário na rota: sem isso, qualquer visitante pode usar o seu número para enviar.

5. 5

   Publique e teste com o seu número

   Depois do deploy, envie para você, confira a resposta HTTP e use GET /{instanceId}/instance/status para saber se a instância está conectada.

// app/api/whatsapp/route.ts (Next.js route handler: runs on the server, the key never reaches the browser)
// Environment variables (NO NEXT_PUBLIC_ prefix): ZAPZAP_API_KEY, ZAPZAP_API_SECRET, ZAPZAP_INSTANCE_ID
export async function POST(req: Request) {
  const { number, text } = await req.json();
  if (!/^\d{10,15}$/.test(String(number)) || typeof text !== "string" || !text) {
    return Response.json({ error: "invalid number or text" }, { status: 400 });
  }
  const r = await fetch("https://api.zapzapapi.com/api/v1/" + process.env.ZAPZAP_INSTANCE_ID + "/send/text", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": process.env.ZAPZAP_API_KEY ?? "",
      "x-api-secret": process.env.ZAPZAP_API_SECRET ?? "",
    },
    body: JSON.stringify({ number, text }),
  });
  return new Response(await r.text(), { status: r.status, headers: { "Content-Type": "application/json" } });
}