WhatsApp in v0: a Next.js server route and keys in environment variables

Step by step

1. 1

   Find where v0 stores environment variables

   The documentation I read (overview, 2026-11-11) does not cover environment variables, and the variables page I tried to open does not exist. Look for the project's variables menu in the tool itself or in the project settings on Vercel after deploy, and confirm there before pasting any key.

2. 2

   Register the three values without a public prefix

   Create ZAPZAP_API_KEY, ZAPZAP_API_SECRET and ZAPZAP_INSTANCE_ID, without NEXT_PUBLIC_ in the name. The keys come from Settings > API at app.zapzapapi.com and the instance is a number connected by QR code.

3. 3

   Ask for the server route

   Prompt: "Create a POST route handler at app/api/whatsapp/route.ts that validates number (10 to 15 digits) and text, and calls https://api.zapzapapi.com/api/v1/{instanceId}/send/text with x-api-key and x-api-secret from process.env. Do not expose the keys to the client."

4. 4

   Connect the form to the route

   The component calls fetch('/api/whatsapp', { method: 'POST', ... }) with number and text. Add a rate limit per IP or per user on the route: without it, any visitor can use your number to send.

5. 5

   Publish and test with your own number

   After the deploy, send to yourself, check the HTTP response and use GET /{instanceId}/instance/status to see whether the instance is connected.

// 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" } });
}