WhatsApp en v0: ruta de servidor de Next.js y claves en variables de entorno

Paso a paso

1. 1

   Descubre dónde guarda v0 las variables de entorno

   La documentación que leí (visión general, 11/11/2026) no cubre variables de entorno, y la página de variables que intenté abrir no existe. Busca el menú de variables del proyecto en la propia herramienta o en la configuración del proyecto en Vercel tras el despliegue, y confirma ahí antes de pegar cualquier clave.

2. 2

   Registra los tres valores sin prefijo público

   Crea ZAPZAP_API_KEY, ZAPZAP_API_SECRET y ZAPZAP_INSTANCE_ID, sin NEXT_PUBLIC_ en el nombre. Las claves salen de Settings > API en app.zapzapapi.com y la instancia es un número conectado por código QR.

3. 3

   Pide la ruta de servidor

   Prompt: "Crea un route handler POST en app/api/whatsapp/route.ts que valide number (10 a 15 dígitos) y text, y llame a https://api.zapzapapi.com/api/v1/{instanceId}/send/text con x-api-key y x-api-secret de process.env. No expongas las claves al cliente."

4. 4

   Conecta el formulario a la ruta

   El componente llama a fetch('/api/whatsapp', { method: 'POST', ... }) con number y text. Agrega un límite de uso por IP o por usuario en la ruta: sin eso, cualquier visitante puede usar tu número para enviar.

5. 5

   Publica y prueba con tu número

   Después del despliegue, envíate un mensaje, revisa la respuesta HTTP y usa GET /{instanceId}/instance/status para saber si la instancia 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" } });
}