Twilio WhatsApp Integration with Node.js & Next.js: Complete Implementation Guide

This guide provides a comprehensive walkthrough for building a robust application that leverages the Twilio API for WhatsApp messaging, featuring a Next.js frontend and a Node.js (Express) backend API. We'll cover everything from initial setup and core messaging functionality to essential production considerations like error handling, security, and deployment.

By the end of this guide, you will have a functional application capable of sending outbound WhatsApp messages initiated via a web interface and receiving/replying to inbound messages via webhooks. This setup solves the common need to programmatically interact with users on WhatsApp for notifications, support, or conversational flows.

Critical WhatsApp Requirements

⚠️ Compliance Notice: WhatsApp enforces strict opt-in and messaging window requirements. Violation may result in account suspension.

Opt-In Requirement

WhatsApp requires explicit user opt-in before your application can send messages. You must gather opt-in consent via web page, mobile app, SMS, or during signup flow. Source: Twilio WhatsApp API Documentation

Warning: Sending messages without opt-in may result in users blocking your business and suspension of your WhatsApp Business Account.

24-Hour Customer Service Window

A customer service window begins when a user sends a message to your application. During this 24-hour period following the most recent message from the user, you can send freeform messages. Outside this window, you must use pre-approved message templates only. Source: Twilio WhatsApp Conversational Messaging

Prerequisites:

• Node.js: Version 14, 16, 18, 20, or 22 LTS installed. Twilio Node.js library officially supports these versions. (Download) Source: Twilio Node.js Library Documentation
• npm or yarn: Package manager for Node.js.
• Twilio Account: A free or paid Twilio account. (Sign up)
• WhatsApp Account: An active WhatsApp account on a smartphone for testing.
• Ngrok (Recommended for Local Development): To expose your local server for Twilio webhooks. (Download)
• Code Editor: Such as Visual Studio Code.
• Meta Business Manager Account: Required for production WhatsApp Business Platform usage. Source: Twilio WhatsApp Self-Signup Guide

⚠️ Security Warning: Do not use the Twilio Node.js library in a front-end application. Doing so exposes your Twilio credentials to end-users as part of the bundled HTML/JavaScript sent to their browser. Source: Twilio Node.js Security Guidelines

System Architecture:

The application consists of two main parts:

1. Next.js Frontend: A web interface allowing users to trigger outbound WhatsApp messages.
2. Node.js (Express) Backend: An API server that handles requests from the frontend, interacts with the Twilio API to send messages, and processes incoming message webhooks from Twilio.

Diagram Description: The user interacts with the Next.js frontend in their browser. The frontend sends API calls (e.g., /send-message) to the Node.js/Express backend API. The backend API communicates with the Twilio API to send a WhatsApp message to the end user. When the user replies via WhatsApp, Twilio sends a webhook notification (e.g., to /webhook/twilio) back to the Node.js/Express API. The API processes the incoming message, potentially sends a TwiML response back to Twilio, which then relays the reply message to the WhatsApp user.

1. Setting up the Project Environment

We'll create a monorepo structure to manage both the frontend and backend code within a single project directory.

1.1. Create Project Directory:

Open your terminal and create the main project directory:

mkdir nextjs-twilio-whatsapp-guide
cd nextjs-twilio-whatsapp-guide

1.2. Initialize Backend (Node.js/Express):

Navigate into a new backend directory and initialize a Node.js project.

mkdir backend
cd backend
npm init -y

1.3. Install Backend Dependencies:

Install Express for the server, the Twilio Node helper library, dotenv for environment variables, and nodemon for development auto-reloading.

npm install express twilio dotenv
npm install --save-dev nodemon

Recommended Versions (as of January 2025):

• twilio: ^5.0.0 (supports Node.js 14-22 LTS)
• express: ^4.19.2 (stable release)
• dotenv: ^16.4.5 (latest stable)
• nodemon: ^3.1.0 (dev dependency)

Note: The Twilio Node.js library v5.x introduced breaking changes from v4.x. Ensure your code follows the v5.x API patterns. Source: Twilio Node.js Library

1.4. Configure Backend Scripts:

Open the backend/package.json file and add the following scripts:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "src/server.js",
  "scripts": {
    "start": "node src/server.js",
    "dev": "nodemon src/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "twilio": "^5.0.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}

Note: These versions reflect January 2025 stable releases. Always verify compatibility with your Node.js version.

1.5. Create Backend Directory Structure:

Create the necessary directories for organizing the backend code.

mkdir src
mkdir src/routes
mkdir src/controllers
mkdir src/services
mkdir src/middleware

• src/: Contains all backend source code.
• src/routes/: Defines API endpoints.
• src/controllers/: Handles request logic.
• src/services/: Encapsulates business logic (like interacting with Twilio).
• src/middleware/: Contains Express middleware functions (e.g., error handling, validation).

1.6. Set up Environment Variables (.env):

Create a .env file in the backend directory. This file will store sensitive credentials and configuration. Never commit this file to version control.

# backend/.env

# Twilio Credentials
TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_AUTH_TOKEN=your_auth_token_here
TWILIO_WHATSAPP_NUMBER=whatsapp:+14155238886 # Your Twilio Sandbox number

# Server Configuration
PORT=3001 # Port for the backend API

# Add other environment variables as needed

Create a .gitignore file in the backend directory to prevent sensitive files from being committed:

# backend/.gitignore
node_modules
.env
npm-debug.log

1.7. Initialize Frontend (Next.js):

Navigate back to the root project directory and create the Next.js frontend app.

cd .. # Go back to nextjs-twilio-whatsapp-guide
npx create-next-app@latest frontend

Follow the prompts (e.g., choosing TypeScript/JavaScript, ESLint, Tailwind CSS). Note: This guide assumes you chose JavaScript when running create-next-app. The provided frontend code uses JavaScript and JSX (.js files). If you chose TypeScript (.tsx), you may need to adjust types accordingly, although the core logic remains similar.

1.8. Configure Frontend Environment Variables:

Next.js uses .env.local for environment variables. Create this file in the frontend directory. Variables prefixed with NEXT_PUBLIC_ are exposed to the browser; others are only available server-side (during build or SSR/API routes).

# frontend/.env.local

# URL of your backend API (adjust if deployed)
NEXT_PUBLIC_API_BASE_URL=http://localhost:3001/api

Ensure .env.local is included in frontend/.gitignore (Create the file if it doesn't exist).

# frontend/.gitignore
node_modules
.env*.local
# ... other ignores generated by create-next-app

Your project structure should now look like this:

nextjs-twilio-whatsapp-guide/
├── backend/
│   ├── node_modules/
│   ├── src/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── routes/
│   │   ├── services/
│   │   └── server.js  # (We will create this next)
│   ├── .env
│   ├── .gitignore
│   └── package.json
└── frontend/
    ├── node_modules/
    ├── pages/
    ├── public/
    ├── styles/
    ├── .env.local
    ├── .gitignore
    ├── next.config.js
    └── package.json

2. Twilio Setup and Configuration

Before writing code to interact with Twilio, you need to configure your account and the WhatsApp Sandbox.

2.1. Obtain Twilio Credentials:

1. Log in to the Twilio Console.
2. On the main dashboard, find your Account SID and Auth Token.
3. Copy these values and paste them into your backend/.env file for TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN.

2.2. Activate the Twilio Sandbox for WhatsApp:

The Sandbox provides a shared Twilio number for testing without needing a dedicated WhatsApp Business number initially.

⚠️ Sandbox Limitations:

• Development/testing only – not for production use
• Uses a shared Twilio number across all Sandbox users
• Requires explicit opt-in from recipients via keyword (e.g., join velvet-unicorn)
• Limited to testing with opted-in phone numbers only
• No custom branding or sender profile

For production applications, you must migrate to a dedicated WhatsApp Business Account (WABA). See Section 9 for production migration details.

1. In the Twilio Console, navigate to Messaging > Try it out > Send a WhatsApp message.
2. Follow the on-screen instructions to activate the Sandbox. This usually involves selecting a Sandbox number.
3. Note down the Sandbox Number (e.g., +14155238886). Add this number, prefixed with whatsapp:, to your backend/.env file as TWILIO_WHATSAPP_NUMBER.
   bash

   TWILIO_WHATSAPP_NUMBER=whatsapp:+14155238886
   
4. Note down your unique Sandbox Keyword (e.g., join velvet-unicorn).

2.3. Opt-in to the Sandbox:

To receive messages from the Sandbox number on your personal WhatsApp account, you must opt-in:

1. Open WhatsApp on your smartphone.
2. Send a message containing your unique Sandbox Keyword (e.g., join velvet-unicorn) to the Twilio Sandbox Number.
3. You should receive a confirmation message back from Twilio.

⚠️ Recipient Opt-In Required: Every recipient phone number must send the join message to the Sandbox before you can send them messages. This satisfies WhatsApp's explicit opt-in requirement for testing.

2.4. WhatsApp Media Support:

WhatsApp messages via Twilio support the following media types:

• Images: JPG, JPEG, PNG
• Audio: AAC, AMR, MP3, MP4, OGG
• Documents: PDF
• Size Limit: 16 MB per message Source: Twilio WhatsApp API Documentation

Incoming media is accessible via MediaUrl0 field in webhook requests. See Section 3.3 for implementation details.

2.5. Configure the Webhook URL (Placeholder):

Twilio needs a URL to send notifications when your Sandbox number receives a message (incoming webhook). We'll set up the actual endpoint later, but know where to configure it:

1. Go back to the Messaging > Try it out > Send a WhatsApp message page in the Twilio Console.
2. Find the "Sandbox settings" tab.
3. Locate the field labeled "When a message comes in". This is where you will eventually put the public URL of your backend webhook endpoint (e.g., https://your-ngrok-url.io/api/webhook/twilio). We'll generate this URL using ngrok during development.

⚠️ HTTPS Required: Twilio requires HTTPS for webhook URLs in production. Use proper SSL certificates (e.g., Let's Encrypt); self-signed certificates are rejected. Source: Twilio Webhooks Security

Supported TLS Ciphers: Ensure your server supports Twilio's required TLS cipher suites. See Twilio TLS Cipher Documentation for the complete list.

WhatsApp Business Platform Limitations (Production)

As of January 2023, WhatsApp imposes the following limits on phone numbers and WhatsApp Business Accounts (WABAs):

Phone Number Limits per Meta Business Manager:

• Unverified Meta Business Manager: Maximum 2 phone numbers across all WABAs
• Verified Meta Business Manager: Up to 20 phone numbers (exception requests for 50 available via support ticket; higher limits require justification and WhatsApp approval)

WABA Limits:

• Verified Meta Business Manager: Maximum 20 WABAs
• Official Business Account (OBA): Up to 1,000 WABAs

Businesses onboarded before January 2023 with higher limits are generally exempted. Source: Twilio WhatsApp Business Platform Overview

3. Implementing Core Functionality (Backend API)

Now, let's build the Express API to handle sending and receiving messages.

3.1. Create the Basic Express Server:

Create the main server file backend/src/server.js.

// backend/src/server.js
require('dotenv').config(); // Load environment variables from .env file
const express = require('express');
const messageRoutes = require('./routes/messageRoutes'); // We'll create this soon
const errorHandler = require('./middleware/errorHandler'); // We'll create this soon

const app = express();
const PORT = process.env.PORT || 3001;

// Middleware
app.use(express.json()); // Parse JSON request bodies
// IMPORTANT: urlencoded middleware must come before routes that handle webhooks
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded request bodies (needed for Twilio webhooks)

// Basic Route for Testing
app.get('/', (req, res) => {
  res.send('Twilio WhatsApp Backend is running!');
});

// API Routes
app.use('/api', messageRoutes);

// Error Handling Middleware (Should be the LAST middleware applied)
app.use(errorHandler);

// Start the server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

3.2. Implement Twilio Service:

Create a service to encapsulate Twilio interactions in backend/src/services/twilioService.js.

// backend/src/services/twilioService.js
const twilio = require('twilio');

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const twilioWhatsAppNumber = process.env.TWILIO_WHATSAPP_NUMBER;

// Validate essential environment variables
if (!accountSid || !authToken || !twilioWhatsAppNumber) {
  console.error("Error: Twilio environment variables (TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, TWILIO_WHATSAPP_NUMBER) must be set.");
  // In production, exit immediately to prevent undefined behavior
  // process.exit(1);
}

let client;
try {
    client = twilio(accountSid, authToken);
} catch (error) {
    console.error("Error initializing Twilio client:", error);
    // Handle client initialization error appropriately
}


/**
 * Sends a WhatsApp message using Twilio.
 * @param {string} to - The recipient's WhatsApp number (e.g., 'whatsapp:+15551234567').
 * @param {string} body - The message content.
 * @param {string[]} [mediaUrl] - Optional array of media URLs (max 16MB per message).
 * @returns {Promise<object&gt;} - The Twilio message object.
 * @throws {Error} - Twilio API errors (see error codes below).
 */
async function sendWhatsAppMessage(to, body, mediaUrl = []) {
  // Ensure client was initialized
  if (!client) {
      throw new Error("Twilio client not initialized. Check credentials.");
  }

  console.log(`Sending message to ${to}: "${body}" from ${twilioWhatsAppNumber}`);
  
  try {
    const messageOptions = {
      body: body,
      from: twilioWhatsAppNumber,
      to: to,
    };
    
    // Add media URLs if provided
    if (mediaUrl && mediaUrl.length &gt; 0) {
      messageOptions.mediaUrl = mediaUrl;
    }
    
    const message = await client.messages.create(messageOptions);
    console.log(`Message sent successfully. SID: ${message.sid}, Status: ${message.status}`);
    return message;
  } catch (error) {
    console.error(`Failed to send message to ${to}:`, error);
    // Log specific Twilio error details
    if (error.code) {
      console.error(`Twilio Error Code: ${error.code} - ${error.message}`);
      // Common error codes:
      // 21211: Invalid 'To' phone number
      // 21408: Permission to send to this number denied  
      // 21610: Message cannot be sent (recipient not opted in)
      // 63007: Sandbox number not configured correctly
      // See: https://www.twilio.com/docs/api/errors
    }
    // Re-throw the error to be handled by the controller/error handler
    throw error;
  }
}

module.exports = {
  sendWhatsAppMessage,
  // Add other Twilio-related functions here if needed
};

Key Enhancements:

• Added mediaUrl parameter support for sending images, audio, and PDFs
• Added detailed error code logging for common Twilio errors
• Added message status logging for debugging
• Improved error messages with actionable details

Common Twilio Error Codes Source: Twilio Error Codes:

• 21211: Invalid 'To' phone number format
• 21408: Permission denied (number not authorized)
• 21610: Attempt to send to unsubscribed recipient
• 63007: Sandbox configuration error
• 21614: 'To' number is not a valid mobile number

3.3. Create Message Controller:

Create backend/src/controllers/messageController.js to handle request logic.

// backend/src/controllers/messageController.js
const twilioService = require('../services/twilioService');
const { MessagingResponse } = require('twilio').twiml;

/**
 * Controller to handle sending an outbound WhatsApp message.
 */
async function sendOutboundMessage(req, res, next) {
  const { to, body } = req.body; // Expect 'to' (e.g., '+15551234567') and 'body'

  // Basic Input Validation
  if (!to || !body) {
    // Use status code 400 for Bad Request
    return res.status(400).json({ success: false, message: "Missing 'to' or 'body' in request." });
  }

  // Basic E.164 format check (can be improved)
  if (!/^\+\d+$/.test(to)) {
      return res.status(400).json({ success: false, message: "Invalid 'to' number format. Use E.164 (e.g., +15551234567)." });
  }

  // Add 'whatsapp:' prefix if not present
  const formattedTo = `whatsapp:${to}`;

  try {
    const message = await twilioService.sendWhatsAppMessage(formattedTo, body);
    res.status(200).json({ success: true, message: "Message sent successfully.", sid: message.sid });
  } catch (error) {
    // Pass error to the error handling middleware
    next(error);
  }
}

/**
 * Controller to handle incoming WhatsApp messages via Twilio webhook.
 */
function handleIncomingMessage(req, res, next) {
  // Twilio sends data in the request body (parsed by urlencoded middleware)
  const { From, Body } = req.body;

  if (!From || Body === undefined) { // Check for undefined Body as well
      console.warn("Received incomplete webhook request:", req.body);
      // Respond politely but indicate an issue processing
      res.writeHead(400, { 'Content-Type': 'text/xml' });
      res.end('<Response&gt;<Message&gt;Could not process your message.</Message&gt;</Response&gt;');
      return;
  }

  console.log(`Incoming message from ${From}: ${Body}`);

  // --- Basic Echo Bot Logic ---
  // Create a TwiML response
  const twiml = new MessagingResponse();
  // Use backticks for template literals, makes embedding variables easier
  twiml.message(`Thanks for your message! You said: "${Body}"`);

  // Send the TwiML response back to Twilio
  res.writeHead(200, { 'Content-Type': 'text/xml' });
  res.end(twiml.toString());

  // --- Add more complex logic here ---
  // e.g., Parse the message, interact with a database, call another API, etc.
  // If processing takes time, respond immediately with 200 OK and process asynchronously.
}

module.exports = {
  sendOutboundMessage,
  handleIncomingMessage,
};

Why TwiML? Twilio Markup Language (TwiML) is an XML-based language used to instruct Twilio on how to handle calls or messages. The MessagingResponse object helps generate this XML easily.

TwiML Constraints:

• Maximum response time: 15 seconds (Twilio times out after 15s)
• Message body limit: 1,600 characters for WhatsApp
• TwiML response must be valid XML
• Content-Type must be text/xml or application/xml

Source: Twilio TwiML for Programmable Messaging

3.4. Define API Routes:

Create backend/src/routes/messageRoutes.js to map endpoints to controllers.

// backend/src/routes/messageRoutes.js
const express = require('express');
const messageController = require('../controllers/messageController');
const validateTwilioRequest = require('../middleware/validateTwilioRequest'); // We'll create this soon

const router = express.Router();

// POST /api/send-message - Endpoint to trigger sending a message
router.post('/send-message', messageController.sendOutboundMessage);

// POST /api/webhook/twilio - Endpoint for Twilio to send incoming message events
// Apply Twilio request validation middleware ONLY to this route
router.post('/webhook/twilio', validateTwilioRequest, messageController.handleIncomingMessage);

module.exports = router;

4. Implementing Security Features (Webhook Validation)

It's crucial to verify that incoming webhook requests genuinely originate from Twilio.

4.1. Create Validation Middleware:

Create backend/src/middleware/validateTwilioRequest.js.

// backend/src/middleware/validateTwilioRequest.js
const twilio = require('twilio');

function validateTwilioRequest(req, res, next) {
  const twilioSignature = req.headers['x-twilio-signature'];
  const authToken = process.env.TWILIO_AUTH_TOKEN;

  if (!authToken) {
      console.error(""TWILIO_AUTH_TOKEN is not set. Cannot validate request."");
      return res.status(500).send(""Internal Server Error: Configuration missing."");
  }

  // Construct the full URL Twilio requested (protocol + host + original URL)
  // IMPORTANT: Relying on 'x-forwarded-proto' requires trusting the immediate upstream proxy (e.g., ngrok, load balancer) to set it correctly and securely. Misconfiguration can bypass validation.
  const protocol = req.headers['x-forwarded-proto'] || req.protocol;
  const url = `${protocol}://${req.get('host')}${req.originalUrl}`;

  // Use the raw body if available (some body parsers might interfere)
  // However, Twilio's helper expects the *parsed* key-value object for validation.
  const params = req.body || {}; // Use parsed body, ensure it's an object

  console.log('Validating Twilio Request:');
  console.log('  URL:', url);
  // Avoid logging sensitive params in production if possible
  // console.log('  Params:', params);
  console.log('  Signature:', twilioSignature);


  // Use the helper function to validate the request
  const requestIsValid = twilio.validateRequest(
    authToken,
    twilioSignature,
    url,
    params // Pass the parsed parameters
  );

  if (requestIsValid) {
    console.log('Twilio request is valid.');
    next(); // Proceed to the next middleware/controller
  } else {
    console.warn('Twilio request validation failed.');
    // Respond with 403 Forbidden if validation fails
    return res.status(403).type('text/plain').send('Forbidden: Invalid Twilio Signature');
  }
}

module.exports = validateTwilioRequest;

Why is this critical? Without validation, anyone could send fake requests to your webhook endpoint, potentially triggering unwanted actions or exhausting resources. This middleware uses your Auth Token and the request details to compute a signature and compares it to the one sent by Twilio (x-twilio-signature header).

4.2. Apply Middleware to Route:

We already applied this middleware selectively to the /webhook/twilio route in messageRoutes.js.

5. Implementing Error Handling

A consistent error handling strategy is essential for robust applications.

5.1. Create Error Handling Middleware:

Create backend/src/middleware/errorHandler.js.

// backend/src/middleware/errorHandler.js

function errorHandler(err, req, res, next) {
  // Log the full error for debugging, especially in development
  console.error("An error occurred:", err);

  // Default error status and message
  let statusCode = 500;
  let message = "Internal Server Error";

  // Check for Twilio-specific errors (often have status and code)
  if (err.status && typeof err.status === 'number') {
    statusCode = err.status;
    message = err.message || "An error occurred processing the request.";
    // You might want to map certain Twilio error codes (err.code) to user-friendly messages
  } else if (err.name === 'ValidationError') { // Example: Handle Mongoose validation errors
      statusCode = 400;
      message = err.message;
  }
  // Add more specific error checks here (e.g., database errors, custom app errors)


  // Send a standardized JSON error response
  // Avoid sending stack trace in production
  res.status(statusCode).json({
      success: false,
      message: message,
      // Only include stack in development for debugging purposes
      stack: process.env.NODE_ENV === 'development' ? err.stack : undefined,
      // Optionally include an error code if available and useful
      code: err.code || undefined
  });
}

module.exports = errorHandler;

Why this approach? This middleware catches errors passed via next(error) from controllers or other middleware. It logs the error and sends a consistent JSON response to the client, preventing sensitive stack traces from leaking in production.

5.2. Apply Middleware:

We already applied this middleware as the last piece of middleware in server.js. Its position is important; it needs to be defined after all routes.

6. Building the Frontend Interface (Next.js)

Let's create a simple form in the Next.js app to send messages.

6.1. Modify Index Page:

Replace the content of frontend/pages/index.js (or index.tsx if using TypeScript) with the following:

// frontend/pages/index.js (or index.tsx)
import React, { useState } from 'react';

export default function HomePage() {
  const [toNumber, setToNumber] = useState('');
  const [messageBody, setMessageBody] = useState('');
  const [status, setStatus] = useState(''); // To show feedback
  const [isLoading, setIsLoading] = useState(false);

  const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsLoading(true);
    setStatus('Sending...');

    if (!apiBaseUrl) {
        setStatus('Error: Frontend API Base URL is not configured.');
        setIsLoading(false);
        console.error(""NEXT_PUBLIC_API_BASE_URL is not set in frontend environment variables."");
        return;
    }

    // Basic frontend validation for E.164 format
    if (!/^\+\d{10,}$/.test(toNumber)) {
        setStatus('Error: Invalid phone number format. Please use E.164 (e.g., +15551234567).');
        setIsLoading(false);
        return;
    }


    try {
      const response = await fetch(`${apiBaseUrl}/send-message`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          // Send only the E.164 number; backend adds 'whatsapp:' prefix
          to: toNumber,
          body: messageBody,
        }),
      });

      const data = await response.json(); // Always try to parse JSON

      if (response.ok && data.success) {
        setStatus(`Message sent successfully! SID: ${data.sid}`);
        setToNumber(''); // Clear fields on success
        setMessageBody('');
      } else {
        // Use message from API response if available, otherwise use generic error
        setStatus(`Error: ${data.message || response.statusText || 'Failed to send message.'}`);
        console.error(""API Error Response:"", data);
      }
    } catch (error) {
      console.error('Send message fetch error:', error);
      setStatus(`Error: ${error.message || 'Network error or server unavailable.'}`);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px'_ maxWidth: '500px'_ margin: 'auto' }}&gt;
      <h1&gt;Send WhatsApp Message via Twilio</h1&gt;
      <form onSubmit={handleSubmit}&gt;
        <div style={{ marginBottom: '15px' }}&gt;
          <label htmlFor=""toNumber"" style={{ display: 'block'_ marginBottom: '5px' }}&gt;
            To Number (E.164 format, e.g., +15551234567):
          </label&gt;
          <input
            type=""tel""
            id=""toNumber""
            value={toNumber}
            onChange={(e) =&gt; setToNumber(e.target.value)}
            required
            placeholder=""+15551234567""
            style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
          /&gt;
        </div&gt;
        <div style={{ marginBottom: '15px' }}&gt;
          <label htmlFor=""messageBody"" style={{ display: 'block'_ marginBottom: '5px' }}&gt;
            Message:
          </label&gt;
          <textarea
            id=""messageBody""
            value={messageBody}
            onChange={(e) =&gt; setMessageBody(e.target.value)}
            required
            rows={4}
            style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
          /&gt;
        </div&gt;
        <button
          type=""submit""
          disabled={isLoading || !toNumber || !messageBody} // Also disable if fields are empty
          style={{
              padding: '10px 15px'_
              cursor: (isLoading || !toNumber || !messageBody) ? 'not-allowed' : 'pointer'_
              opacity: (isLoading || !toNumber || !messageBody) ? 0.6 : 1
            }}
        &gt;
          {isLoading ? 'Sending...' : 'Send Message'}
        </button&gt;
      </form&gt;
      {status && (
        <p style={{ marginTop: '15px'_ border: '1px solid #ccc'_ padding: '10px'_ background: status.startsWith('Error:') ? '#ffe0e0' : '#e0ffe0' }}&gt;
          Status: {status}
        </p&gt;
      )}
       <p style={{ marginTop: '20px'_ fontSize: '0.9em'_ color: '#555' }}&gt;
        Ensure your backend server is running ({apiBaseUrl || 'API URL missing!'}) and the 'To Number' has opted-in to the Twilio Sandbox.
      </p&gt;
    </div&gt;
  );
}

Explanation: This React component creates a simple form. On submission, it makes a POST request to the backend's /api/send-message endpoint using the fetch API, sending the phone number and message body. It handles loading states and displays success or error messages.

Note on Styling: This example uses inline styles (style={{ ... }}) for simplicity. For larger applications, consider using CSS Modules (built into Next.js) or a utility-first framework like Tailwind CSS (if selected during create-next-app) for better maintainability and organization.

7. Running and Testing Locally

7.1. Start the Backend Server:

Open a terminal in the backend directory.

cd backend
npm run dev # Uses nodemon for auto-restarts

The backend should start on http://localhost:3001 (or the port specified in .env).

7.2. Start the Frontend Development Server:

Open another terminal in the frontend directory.

cd ../frontend # Assuming you are in the backend directory
npm run dev

The frontend should start on http://localhost:3000.

7.3. Test Sending Messages:

1. Open http://localhost:3000 in your browser.
2. Enter your personal WhatsApp number (that you opted-in with) in E.164 format (e.g., +15551234567) in the "To Number" field.
3. Enter a message in the "Message" field.
4. Click "Send Message".
5. Check your WhatsApp – you should receive the message from the Twilio Sandbox number.
6. Check the backend terminal – you should see logs for sending the message. If there's an error, check the browser console and backend logs for details.

7.4. Test Receiving Messages (Webhook):

1. Expose Backend with Ngrok: If you haven't already, install ngrok. Open a third terminal and run:

   bash

   # Replace 3001 if your backend runs on a different port
   ngrok http 3001
   

   Ngrok will provide a public HTTPS URL (e.g., https://abcd-1234.ngrok.io). Copy this HTTPS URL.

2. Configure Twilio Webhook:

   • Go to your Twilio Console > Messaging > Try it out > Send a WhatsApp message > Sandbox settings.
   • Paste the ngrok HTTPS URL into the "When a message comes in" field, appending your webhook path: https://<your-ngrok-id&gt;.ngrok.io/api/webhook/twilio
   • Ensure the method is set to HTTP POST.
   • Click Save.

3. Send a Message to Twilio:

   • From your personal WhatsApp account, send any message to the Twilio Sandbox number.

4. Verify Reception:

   • Check the terminal where your backend server (npm run dev) is running. You should see logs:
     • Validating Twilio Request: (followed by details)
     • Twilio request is valid.
     • Incoming message from whatsapp:+15551234567: <Your message text&gt;
   • Check your WhatsApp – you should receive the echo reply: Thanks for your message! You said: "<Your message text&gt;"
   • Check the terminal where ngrok is running. You should see POST /api/webhook/twilio requests with 200 OK responses. If you see errors (like 403), re-check the validation steps and ngrok URL.

8. Troubleshooting and Caveats

• Invalid Credentials: Ensure TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, and TWILIO_WHATSAPP_NUMBER in backend/.env are correct and the server was restarted after changes. Check for typos.
• Incorrect Phone Number Format: Twilio expects E.164 format (+ followed by country code and number, e.g., +14155238886) prefixed with whatsapp: when sending via the API. The From number in webhooks will already have the whatsapp: prefix. Ensure the frontend sends the E.164 part (like +1...) and the backend adds the prefix.
• Sandbox Opt-In: The recipient number must have sent the join <your-keyword&gt; message to the Sandbox number first. You might need to resend the join message if you haven't interacted recently or changed sandboxes.
• Ngrok Issues: Ensure ngrok is running and forwarding to the correct backend port (e.g., 3001). The URL in Twilio must be the HTTPS version provided by ngrok and include the full path /api/webhook/twilio. Ngrok URLs change each time you restart it, so update Twilio accordingly.
• Webhook Validation Failure (403 Forbidden):
  • Verify TWILIO_AUTH_TOKEN in backend/.env is absolutely correct.
  • Ensure the URL used in twilio.validateRequest (constructed within the middleware) exactly matches the URL Twilio is sending the request to (check the ngrok terminal for the incoming request path). Pay attention to http vs https. Check if a proxy/load balancer is correctly setting x-forwarded-proto if you rely on it.
  • Ensure express.urlencoded({ extended: true }) middleware is used before your webhook route handler in backend/src/server.js, as Twilio sends webhook data as application/x-www-form-urlencoded. It should appear before app.use('/api', messageRoutes); if your webhook is under /api.
• Firewall Issues: If deploying, ensure your server's firewall allows incoming connections on the port your backend runs on (e.g., 3001 or 80/443) and specifically allows traffic from Twilio's IP ranges (though webhook validation is the primary security measure). Twilio IP Ranges
• Dependencies: Make sure all dependencies (npm install) are installed correctly in both backend and frontend directories. Check package-lock.json or yarn.lock for consistency.
• API URL Mismatch: Double-check NEXT_PUBLIC_API_BASE_URL in frontend/.env.local points precisely to the running backend API endpoint (e.g., http://localhost:3001/api for local dev, or your deployed backend URL). Remember to restart the Next.js dev server after changing .env.local.
• CORS Issues: If deploying frontend and backend to different domains, you'll need to configure CORS (Cross-Origin Resource Sharing) on the backend (e.g., using the cors npm package in Express) to allow requests from your frontend's domain.

9. Deployment Considerations

Deploying this requires deploying both the Next.js frontend and the Node.js backend.

Common Strategy: Vercel

Vercel is excellent for hosting Next.js applications and can also host serverless functions, potentially simplifying deployment.

1. Combine into one Vercel Project (Optional but common): You could move the backend's API routes (/api/send-message, /api/webhook/twilio) into the Next.js pages/api directory. This way, Vercel deploys both frontend and backend together.
   • You'd need to adjust imports (../../services/twilioService etc.) and potentially merge dependencies into the root package.json if you restructure.
   • The twilioService.js and middleware could live in a lib or utils folder within the Next.js project.
   • Webhook validation needs careful path checking within the serverless function context.
2. Deploy Frontend to Vercel: Connect your Git repository (containing the frontend directory, or the combined project) to Vercel. Vercel automatically detects Next.js and deploys it.
3. Deploy Backend (if separate):
   • Vercel Serverless: If using the combined approach above, it's deployed automatically with the frontend.
   • Separate Hosting (e.g., Render, Fly.io, AWS EC2/Lambda, Google Cloud Run): Deploy the backend directory as a standard Node.js application. You'll typically need to configure a build command (npm install) and a start command (npm start).
4. Environment Variables: Configure all necessary environment variables (TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, TWILIO_WHATSAPP_NUMBER, NEXT_PUBLIC_API_BASE_URL - pointing to the deployed backend URL) in your hosting provider's settings (e.g., Vercel Environment Variables). Ensure frontend public variables (NEXT_PUBLIC_*) are configured correctly for the frontend deployment.
5. Update Webhook URL: Once the backend is deployed to a stable public URL, update the Twilio Sandbox webhook setting to point to this new URL (e.g., https://your-deployed-app.com/api/webhook/twilio). Ngrok is only for local development.
6. Production Twilio Number: For a production application, move beyond the Sandbox. Purchase a Twilio phone number capable of WhatsApp and register it with the WhatsApp Business API via Twilio. Update TWILIO_WHATSAPP_NUMBER accordingly. This involves a more formal setup process.