What is WaSenderAPI?

WaSenderAPI is an affordable and developer-friendly WhatsApp API designed to make communication fast and simple. It enables you to send messages, alerts, or notifications to WhatsApp users efficiently — and without the complexity or high cost of traditional APIs.

Prerequisites

Before getting started, make sure you have the following ready:

• A WaSenderAPI account and access to your API key.
• A working Next.js project (Node.js installed).
• Basic familiarity with API routes in Next.js and the fetch API.

Step-by-Step Guide to Sending WhatsApp Messages with Next.js

1. Set Up an API Route

First, create an API route in your Next.js project to handle the request to WaSenderAPI.

// pages/api/send-whatsapp.js
export default async function handler(req, res) {
    if (req.method !== 'POST') {
        return res.status(405).json({ message: 'Only POST requests allowed' });
    }

    const { to, text } = req.body;

    const response = await fetch('https://wasenderapi.com/api/send-message', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer your_api_key_here'
        },
        body: JSON.stringify({
            to: to,
            text: text
        })
    });

    const result = await response.json();
    res.status(response.status).json(result);
}
        

2. Create a Frontend Form to Trigger the API

Now create a form in your React component or page to send the WhatsApp message:

import { useState } from 'react';

export default function SendMessageForm() {
    const [to, setTo] = useState('');
    const [text, setText] = useState('');
    const [response, setResponse] = useState(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        const res = await fetch('/api/send-whatsapp', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ to: [to], text })
        });
        const data = await res.json();
        setResponse(data);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="Phone number"
                value={to}
                onChange={(e) => setTo(e.target.value)}
            />
            <br />
            <textarea
                placeholder="Your message"
                value={text}
                onChange={(e) => setText(e.target.value)}
            />
            <br />
            <button type="submit">Send Message</button>
            {response && <pre>{JSON.stringify(response, null, 2)}</pre>}
        </form>
    );
}
        

3. Understand the Code

• API Route: Handles POST requests and communicates securely with WaSenderAPI using your API key.
• Authorization: The Bearer token is required to authenticate your request.
• Dynamic Frontend: The form allows users to input a phone number and message, and calls the API route when submitted.

4. Test the Integration

Run your Next.js app using npm run dev or yarn dev. Use the form to send a WhatsApp message and check the response. Make sure the phone number is correctly formatted with the country code (e.g., 212xxxxxxxxx for Morocco).

Conclusion

Sending WhatsApp messages using Next.js and WaSenderAPI is fast, easy, and highly scalable. Whether you're building a CRM, e-commerce site, or notification system, WaSenderAPI fits right in with modern React-based workflows. Follow the steps above and start enhancing your app’s communication today!

Start Using WaSenderAPI

FAQ