How to Integrate WhatsApp Business API in Next.js

Building conversational flows into web applications has become standard practice. Meta's WhatsApp Business API allows brands to connect directly with users, send interactive receipts, and automate service requests.

In this guide, we'll walk through how to build a Next.js API Route Handler to verify Meta webhooks, receive user messages, and send template notifications.

---

1. Prerequisites

Before writing code, ensure you have: 1. A verified Meta Developer Account. 2. A WhatsApp Business profile linked to your developers dashboard. 3. Your Sendexa API Key (for quick, pre-configured access to Meta's routing nodes).

---

2. Setting Up Webhook Verification in Next.js

Meta requires you to deploy an HTTPS endpoint that can verify a "Hub Challenge" query parameter to confirm your webhook server's authenticity.

Here is the Next.js Route Handler implementation for app/api/whatsapp/webhook/route.ts:

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const mode = searchParams.get('hub.mode'); const token = searchParams.get('hub.verify_token'); const challenge = searchParams.get('hub.challenge');

const VERIFY_TOKEN = process.env.WHATSAPP_VERIFY_TOKEN;

if (mode === 'subscribe' && token === VERIFY_TOKEN) { console.log('Webhook verified successfully!'); return new Response(challenge, { status: 200 }); }

return new Response('Forbidden', { status: 403 }); } `

---

3. Handling Incoming Messages

When a customer replies to your WhatsApp number, Meta triggers a POST request to your webhook. You can process this payload in the same Route Handler file:

export async function POST(request: Request) {
  try {
    const payload = await request.json();

if (messageDetails) { const customerPhone = messageDetails.from; const messageBody = messageDetails.text?.body; console.log(Received message from ${customerPhone}: ${messageBody}); // Trigger automated bot replies or assign to support dashboard await handleBotLogic(customerPhone, messageBody); }

return NextResponse.json({ success: true }, { status: 200 }); } catch (error: any) { console.error('Webhook error:', error.message); return NextResponse.json({ error: 'Internal Error' }, { status: 500 }); } } `

---

4. Sending WhatsApp Template Messages

To start conversations with users, you must use approved Message Templates. Here is how you dispatch a template message using the Sendexa SDK:

const sendexa = new SendexaClient({ apiKey: process.env.SENDEXA_API_KEY, });

async function sendWelcomeNotification(recipientPhone, userName) { try { const response = await sendexa.whatsapp.sendTemplate({ to: recipientPhone, templateName: 'welcome_customer', language: 'en_US', components: [ { type: 'body', parameters: [ { type: 'text', text: userName } ] } ] }); console.log('WhatsApp message sent! ID:', response.messageId); } catch (error) { console.error('Failed to dispatch:', error.message); } } `

*Using Sendexa's Unified API simplifies Meta's complex configuration requirements, managing webhook verifications and session controls automatically.*