In today’s digital world, integrating SMS functionality into web applications can significantly enhance user engagement and communication. Whether you're building an e-commerce platform, a SaaS product, or a personal project, the ability to send text messages directly from your app can be a game-changer.

In this tutorial, we’ll walk through how to integrate Twilio, a popular cloud communications platform, with a Next.js application to send SMS messages to phones. By the end of this guide, you'll have a fully functional setup that allows your Next.js app to communicate with users via SMS.

Prerequisites

Before we dive in, ensure you have the following:

Node.js installed on your machine (v14 or higher).
A Twilio account (sign up at twilio.com).
Basic knowledge of JavaScript, React, and Next.js.
A code editor like VS Code.

Step 1: Setting Up Your Twilio Account

1.1 Create a Twilio Account

If you haven’t already, head over to Twilio and create a free account. Once you’ve signed up, Twilio will provide you with:

Account SID: A unique identifier for your Twilio account.

Auth Token: A secret token used to authenticate API requests.

Twilio Phone Number: A phone number you can use to send SMS messages.

You can find these details in your Twilio console under the Dashboard section.

1.2 Install Twilio CLI (Optional)

While not necessary for this tutorial, installing the Twilio CLI can help you manage your Twilio resources more efficiently. You can install it using npm:

npm install -g twilio-cli

After installation, log in using:

twilio login

Step 2: Setting Up a Next.js Project

If you don’t already have a Next.js project, you can quickly set one up using the following commands:

npx create-next-app@latest twilio-nextjs-sms
cd twilio-nextjs-sms

This will create a new Next.js project in the twilio-nextjs-sms directory.

Step 3: Installing Twilio SDK

To interact with Twilio's API, we need to install the Twilio Node.js SDK. Run the following command in your project directory:

npm install twilio

Step 4: Creating an API Route in Next.js

Next.js allows us to create serverless API routes, which are perfect for handling sensitive operations like sending SMS messages. We’ll create an API route that will handle the logic for sending SMS messages.

4.1 Create the API Route

Inside the pages/api directory, create a new file called send-sms.js. This file will contain the logic to send SMS messages using Twilio.

// pages/api/send-sms.js

import { Twilio } from 'twilio';

// Load environment variables
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const twilioPhoneNumber = process.env.TWILIO_PHONE_NUMBER;

// Initialize Twilio client
const client = new Twilio(accountSid, authToken);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { to, body } = req.body;

    try {
      // Send SMS using Twilio
      const message = await client.messages.create({
        body: body,
        from: twilioPhoneNumber,
        to: to,
      });

      // Return success response
      res.status(200).json({ success: true, message: 'SMS sent successfully!', sid: message.sid });
    } catch (error) {
      console.error(error);
      res.status(500).json({ success: false, error: 'Failed to send SMS' });
    }
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

4.2 Explanation of the Code

Twilio Client Initialization: We initialize the Twilio client using the accountSid, authToken, and twilioPhoneNumber loaded from environment variables.

POST Request Handling: The API route only accepts POST requests. It expects a JSON payload with to (the recipient's phone number) and body (the message content).

Sending SMS: The client.messages.create() method sends the SMS. If successful, it returns a response with the message SID.

Error Handling: If something goes wrong, the API returns a 500-status code with an error message.

4.3 Environment Variables

To keep your credentials secure, store them in environment variables. Create a .env.local file in the root of your project and add the following:

TWILIO_ACCOUNT_SID=your_account_sid
TWILIO_AUTH_TOKEN=your_auth_token
TWILIO_PHONE_NUMBER=your_twilio_phone_number

Make sure to replace your_account_sid, your_auth_token, and your_twilio_phone_number with the actual values from your Twilio dashboard.

Important: Add .env.local to your .gitignore file to prevent sensitive information from being committed to version control.

Step 5: Creating a Frontend Form to Send SMS

Now that we have our API route ready, let’s create a simple front-end form where users can input a phone number and message to send an SMS.

5.1 Create the Form Component

Create a new file called SendSMS.js inside the components directory:

 // components/SendSMS.js

import { useState } from 'react';

export default function SendSMS() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await fetch('/api/send-sms', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ to: phoneNumber, body: message }),
    });

    const data = await res.json();
    setResponse(data);
  };

  return (
    <div>
      <h1>Send SMS via Twilio</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="phoneNumber">Phone Number:</label>
          <input
            type="text"
            id="phoneNumber"
            value={phoneNumber}
            onChange={(e) => setPhoneNumber(e.target.value)}
            placeholder="+1234567890"
            required
          />
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea
            id="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Enter your message here"
            required
          />
        </div>
        <button type="submit">Send SMS</button>
      </form>

      {response && (
        <div>
          <h3>Response:</h3>
          <p>{response.success ? 'SMS sent successfully!' : 'Failed to send SMS'}</p>
          {response.sid && <p>Message SID: {response.sid}</p>}
        </div>
      )}
    </div>
  );
}

5.2 Explanation of the Code

State Management: We use React's useState hook to manage the phone number, message, and API response.

Form Submission: When the form is submitted, we make a POST request to our /api/send-sms endpoint with the phone number and message as the payload.

Response Handling: After receiving a response from the API, we display whether the SMS was sent successfully or if there was an error.

5.3 Integrate the Form into a Page

Now, let’s integrate the form into one of our pages. Open pages/index.js and import the SendSMS component:

// pages/index.js

import SendSMS from '../components/SendSMS';

export default function Home() {
  return (
    <div>
      <SendSMS />
    </div>
  );
}

Step 6: Testing the Integration

Start your Next.js development server:

npm run dev

Navigate to http://localhost:3000 in your browser. You should see the form where you can enter a phone number and message. Submit the form, and if everything is set up correctly, you should receive an SMS on the specified phone number.

Conclusion

In this tutorial, we learned how to integrate Twilio with a Next.js application to send SMS messages. We created an API route to handle the SMS sending logic securely and built a simple frontend form to interact with this API.

With this setup, you can now extend the functionality to include features like user authentication, message templates, or even scheduling SMS messages. Twilio offers a wide range of capabilities beyond SMS, such as voice calls, WhatsApp messages, and more, so feel free to explore further!

How you can send messages to authenticate users with Next.js and Twilio integration?