How to Send Alerts on WhatsApp Using Next.js

Introduction

Want to send alerts on WhatsApp easily? In this guide, we'll show you how to use Next.js to set up notifications. You'll learn the simple steps to make your app send messages directly to WhatsApp. Let’s get started and keep your users updated in a snap!

What You Need

Before we dive in, here’s a list of what you’ll need:

• Node.js installed on your machine
• A Next.js project set up
• A Twilio account (for WhatsApp messaging)
• Basic knowledge of JavaScript

Setting Up Your Next.js Project

If you haven't set up a Next.js project yet, don’t worry. It’s quite simple. Open your terminal and run the following commands:

npx create-next-app@latest my-whatsapp-notifier
cd my-whatsapp-notifier
npm run dev

This creates a new Next.js app and starts a local server. You can visit http://localhost:3000 in your browser to see your new app.

Creating a Twilio Account

To send messages on WhatsApp, you need to use Twilio. Here’s how to get started:

1. Go to Twilio's website and sign up for a free account.
2. Once you’re signed in, navigate to the WhatsApp section in the dashboard.
3. Follow the instructions to set up your WhatsApp sandbox. You will need to send a code via WhatsApp to a specific number provided by Twilio.
4. Take note of your Account SID and Auth Token, which you will use in your Next.js app.

Installing the Twilio SDK

Now that your Twilio account is ready, you need to install the Twilio SDK in your Next.js app. Run this command in your project folder:

npm install twilio

Creating the API Route

Next, you need to create an API route that will handle sending messages. Create a new file in the pages/api folder called sendMessage.js. Add the following code:

import twilio from 'twilio';

const accountSid = 'YOUR_TWILIO_ACCOUNT_SID';
const authToken = 'YOUR_TWILIO_AUTH_TOKEN';
const client = twilio(accountSid, authToken);

export default async function handler(req, res) {
    if (req.method === 'POST') {
        const { message } = req.body;
        
        try {
            await client.messages.create({
                from: 'whatsapp:+14155238886', // This is Twilio's sandbox number
                to: 'whatsapp:+YOUR_PHONE_NUMBER', // Your phone number
                body: message,
            });
            res.status(200).json({ status: 'Message sent!' });
        } catch (error) {
            console.error(error);
            res.status(500).json({ status: 'Failed to send message' });
        }
    } else {
        res.setHeader('Allow', ['POST']);
        res.status(405).end(`Method ${req.method} Not Allowed`);
    }
}

Replace YOUR_TWILIO_ACCOUNT_SID and YOUR_TWILIO_AUTH_TOKEN with the values from your Twilio account. Also, replace YOUR_PHONE_NUMBER with the phone number where you want to receive messages.

Sending a Message

Now, let’s create a simple form on the homepage to send messages. Open pages/index.js and replace the code with the following:

import { useState } from 'react';

export default function Home() {
    const [message, setMessage] = useState('');

    const handleSubmit = async (event) => {
        event.preventDefault();
        
        const response = await fetch('/api/sendMessage', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ message }),
        });

        const data = await response.json();
        console.log(data);
        setMessage('');
    };

    return (
        <div>
            <h2>Send WhatsApp Alert</h2>
            <form onSubmit={handleSubmit}>
                <textarea 
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    placeholder="Type your message here"
                />
                <button type="submit">Send</button>
            </form>
        </div>
    );
}

This code will set up a simple form where users can type a message and send it. When the form is submitted, it will call the API route you created earlier.

Testing Your Setup

Now it's time to test everything. Make sure your Next.js app is running, and open it in your browser. Type a message in the form and hit send. You should see a response in the console, and if everything is correct, the message will arrive in your WhatsApp!

Conclusion

And that’s it! You’ve successfully set up a way to send alerts on WhatsApp using Next.js. With the power of Twilio and some simple code, you can keep your users informed in real-time. Feel free to customize this as much as you want. Happy coding!