Send, Receive and Handle SMS Delivery Receipts with Next.js and Vonage
Published on January 9, 2024

Introduction

The Vonage SMS API enables you to send and receive text messages to and from users worldwide, using our REST APIs. In this tutorial, we will focus on sending and receiving SMS messages and handling delivery receipts with Next.js using the SMS API. Next.js is a React framework for creating full-stack web apps. It uses React Components for UI development and incorporates extra features and optimizations via Next.js. If you are interested in learning more, you can access the Vonage SMS API documentation.

tldr; If you would like to skip ahead and get right to deploying it, you can find all the code for the app on GitHub.

Table of Contents

  1. Prerequisites

  2. How to send an SMS with Next.js

  3. How to receive an SMS delivery receipts and handle SMS with Next.js

Prerequisites

This tutorial assumes you have a basic understanding of Git, Next.js, React and JavaScript. Before you begin, make sure you have the following:

  • Vonage API account - Access your Vonage API Dashboard to locate your API Key and API Secret, which can be found at the top of the page.

  • Vonage Virtual Number - Rent a virtual phone number to send or receive messages and phone calls.

  • Node.js 18.17 or later - Node.js is an open-source, cross-platform JavaScript runtime environment.

  • Deployment Platform such as Vercel, Netlify, etc. - We’ll set up webhooks for the URLs that receive inbound SMS and delivery receipts. This way, we’ll be able to receive SMS and handle delivery receipts.

How to Send an SMS with Next.js

For the initial section of this tutorial, we’ll explore how to send text messages using Next.js. We will use the Vonage SMS API to interact with Next.js. To send an SMS with Next.js and the Vonage SMS API, proceed with these instructions:

  1. How to Create a new Next.js project

  2. How to Declare environment variables

  3. How to Install the Vonage Node.js SDK

  4. How to Install the validation library Zod

  5. How to Create a server-only form

  6. How to Run the development server

  7. How to Deploy to Vercel

1. How to Create a New Next.js Project

To create a Next.js app, run:

npx create-next-app@latest

On installation, you’ll see the following prompts:

What is your project named? vonage-send-sms Would you like to use TypeScript? No Would you like to use ESLint? Yes Would you like to use Tailwind CSS? Yes Would you like to use `src/` directory? No Would you like to use App Router? (recommended) Yes Would you like to customize the default import alias (@/*)? No

In this tutorial, we’ll use the App Router and JavaScript, so you can choose the same answers as above. After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

2. How to Declare Environment Variables

Retrieve your API key and API secret from your API settings, also get your virtual number from the your numbers page, and create a .env.local file with the following environment variables:

VONAGE_API_KEY=your-vonage-api-key
VONAGE_API_SECRET=your-api-secret
VONAGE_VIRTUAL_NUMBER=your-virtual-number

To rent a Vonage virtual number:

  1. Sign in to the developer dashboard.

  2. In the left-hand navigation menu, click Numbers then Buy numbers.

  3. Choose the attributes you need and then click Search.

    1. In this tutorial we only need SMS capability. But you can use the same number to add other voice functionality as well!

  4. Click the Buy button next to the number you want and validate your purchase.

  5. Your virtual number is now listed in Your numbers.

See rent a virtual number.

3. How to Install the Vonage Node.js SDK

We’ll use the Vonage Node.js SDK. It’s so easy to send an SMS with Next.js.

To install the Node.js SDK, run:

npm install @vonage/server-sdk

4. How to Install the Validation Library Zod

Zod is a TypeScript-first schema declaration and validation library. We will use it to check the values after the form is submitted. But it is not mandatory, you may skip this step if you want.

To install the Zod, run:

npm install zod

5. How to Create a Server-Only Form

Create a new folder called lib inside /app. Then, create a new send-sms.js file inside the lib folder with the following content:

"use server";

import { revalidatePath } from "next/cache";
import { Vonage } from "@vonage/server-sdk";

After importing the dependencies, initialize the Vonage node library installed earlier:

const vonage = new Vonage({
  apiKey: process.env.VONAGE_API_KEY,
  apiSecret: process.env.VONAGE_API_SECRET,
});

const from = process.env.VONAGE_VIRTUAL_NUMBER;

Then initialize the Vonage node library, we will create an async function called sendSMS:

export async function sendSMS(prevState, formData) {
  try {
    const vonage_response = await vonage.sms.send({
      to: formData.get("number"),
      from,
      text: formData.get("text"),
    }); 

    revalidatePath("/");
    return {
      response:
        vonage_response.messages[0].status === "0"
          ? `🎉 Message sent successfully.`
          : `There was an error sending the SMS. ${
              // prettier-ignore
              vonage_response.messages[0].error-text
            }`,
    };
  } catch (e) {
    return {
      response: `There was an error sending the SMS. The error message: ${e.message}`,
    };
  }
}

To send an SMS message using the SMS API, we’ll use the vonage.messages.send method of the Vonage Node.js library. This method accepts objects as parameters that contain information about the recipient, sender, and content. The SMS API has two types of response (vonage_response), one is message sent and the other is error. See SMS responses.

Example response for the Message Sent:

{
   "message-count": "1",
   "messages": [
      {
         "to": "447700900000",
         "message-id": "aaaaaaaa-bbbb-cccc-dddd-0123456789ab",
         "status": "0",
         "remaining-balance": "3.14159265",
         "message-price": "0.03330000",
         "network": "12345",
         "client-ref": "my-personal-reference",
         "account-ref": "customer1234"
      }
   ]
}

Example response for the Error:

{
   "message-count": "1",
   "messages": [
      {
         "status": "2",
         "error-text": "Missing to param"
      }
   ]
}

We’ll invalidate an entire route segment with revalidatePath, that allows you to purge cached data on-demand for a specific path. It does not return any value. See revalidatePath.

For more advanced server-side validation, use the Zod library. If you use it, the send-sms.js file should look like this:

"use server";

import { revalidatePath } from "next/cache";
import { Vonage } from "@vonage/server-sdk";
import { z } from "zod";

const vonage = new Vonage({
  apiKey: process.env.VONAGE_API_KEY,
  apiSecret: process.env.VONAGE_API_SECRET,
});

const from = process.env.VONAGE_VIRTUAL_NUMBER;

const schema = z.object({
  number: z
    .string()
    .regex(new RegExp(/^\d{10,}$|^(\d{1,4}-)?\d{10,}$/), "Invalid Number!"),
  text: z.string().min(1, "Type something, please!").max(140, "Too long text!"),
});

export async function sendSMS(prevState, formData) {
  try {
    const data = schema.parse({
      number: formData.get("number"),
      text: formData.get("text"),
    });

    const vonage_response = await vonage.sms.send({
      to: data.number,
      from,
      text: data.text,
    }); 

    revalidatePath("/");
    return {
      response:
        vonage_response.messages[0].status === "0"
          ? `🎉 Message sent successfully.`
          : `There was an error sending the SMS. ${
              // prettier-ignore
              vonage_response.messages[0].error-text
            }`,
    };
  } catch (e) {
    return {
      response: `There was an error sending the SMS. The error message: ${e.message}`,
    };
  }
}

For UI, create a new send-form.jsx file inside /app with the following content:

"use client";

import { sendSMS } from "@/app/lib/send-sms";
import { useFormStatus, useFormState } from "react-dom";

const initialState = {
  response: null,
};

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" aria-disabled="{pending}" classname="border rounded-md hover:bg-slate-50 p-2 flex justify-center items-center">
      {pending ? (
        &lt;&gt;
          <div class="border-gray-300 h-5 w-5 animate-spin rounded-full border-2 border-t-blue-600 mr-2">
          Sending...
        
      ) : (
        "Send"
      )}
    </div></button>
  );
}

export function SendForm() {
  const [state, formAction] = useFormState(sendSMS, initialState);

  return (
    <form action="{formAction}" classname="flex flex-col gap-y-2">
      <label htmlfor="number">Phone number:</label>
      <input name="number" id="number" type="number" placeholder="909009009099" autocomplete="off" classname="border rounded p-2" required="">
      <label htmlfor="text">Message:</label>
      <textarea name="text" id="text" rows="{4}" cols="{40}" placeholder="Hello from Next.js App!" classname="border rounded p-2" required="">      &lt;SubmitButton /&gt;
      &lt;p aria-live="polite"&gt;{state?.response}&lt;/p&gt;
    &lt;/form&gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You can use the &lt;code&gt;useFormStatus&lt;/code&gt; hook to display a loading status when a form is being submitted to the server. Another hook, the &lt;code&gt;useFormState&lt;/code&gt;, allows you to update state based on a form action result.&lt;/p&gt;
&lt;p&gt;Finally, you can import the &lt;code&gt;send-form.jsx&lt;/code&gt; file to the &lt;code&gt;page.js&lt;/code&gt; inside /app.&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-javascript"&gt;import { SendForm } from "./send-form";

export default function Home() {
  return (
    &lt;main className="mx-auto max-w-3xl my-3 p-3 border border-slate-300 shadow rounded-lg divide-y divide-solid"&gt;
      &lt;header className="flex flex-row p-3 items-center justify-between"&gt;
        &lt;img src="/vonage.svg" alt="Vonage" /&gt;
        &lt;h2 className="text-lg font-medium"&gt;Send SMS with the Vonage APIs&lt;/h2&gt;
      &lt;/header&gt;
      &lt;section className="pt-3"&gt;
        &lt;SendForm /&gt;
      &lt;/section&gt;
    &lt;/main&gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#Note-You-can-find-the-vonagesvg-in-the-sample-repository" title="Note-You-can-find-the-vonagesvg-in-the-sample-repository"&gt;&lt;/a&gt;&lt;strong&gt;Note:&lt;/strong&gt; You can find the vonage.svg file in the sample repository.&lt;/p&gt;
&lt;h2&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#6-Run-the-development-server" title="6-Run-the-development-server"&gt;&lt;/a&gt;6. How to Run the Development Server&lt;/h2&gt;
&lt;p&gt;In the first step of this section, we created a directory called &lt;code&gt;vonage-send-sms&lt;/code&gt;. Now let’s &lt;code&gt;cd&lt;/code&gt; into it through the terminal:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-shell"&gt;cd vonage-send-sms
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Then, run the following command:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-shell"&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This command launches the development server for your Next.js application on port &lt;strong&gt;3000&lt;/strong&gt;. To see your home page, open &lt;a href="http://localhost:3000/"&gt;http://localhost:3000&lt;/a&gt; from your browser. It should look like this:&lt;/p&gt;
&lt;p&gt;&lt;img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/send-receive-and-handle-sms-delivery-receipts-with-next-js-and-vonage/send-sms-nextjs-form.png" alt="Next.js test form to send SMS" title="Next.js test form to send SMS"&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#7-Deploy-to-Vercel" title="7-Deploy-to-Vercel"&gt;&lt;/a&gt;7. How to Deploy to Vercel&lt;/h2&gt;
&lt;p&gt;We’ll use Vercel to deploy our app for this tutorial but you can also deploy your project with Netlify. Vercel has several options to deploy your project such as Git, Vercel CLI, etc. The most popular method for creating a deployment on Vercel is by pushing code to Git repositories, so we’ll use Git with GitHub. You can start using it for free.&lt;/p&gt;
&lt;h3&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#Create-a-GitHub-Account" title="Create-a-GitHub-Account"&gt;&lt;/a&gt;Create a GitHub Account&lt;/h3&gt;
&lt;p&gt;To begin using GitHub, create a free account on &lt;a href="https://github.com/"&gt;GitHub.com&lt;/a&gt; and confirm your email address.&lt;/p&gt;
&lt;h3&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#Push-your-project-to-GitHub" title="Push-your-project-to-GitHub"&gt;&lt;/a&gt;Push your project to GitHub&lt;/h3&gt;
&lt;p&gt;Before the deployment, let’s upload our Next.js application to GitHub. The repository can be shared with everyone or kept private. You don’t have to set it up with a README or any other files.&lt;/p&gt;
&lt;p&gt;To push to GitHub, run these commands, replacing &lt;code&gt;&lt;username&gt;&lt;/code&gt; with your GitHub username:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-shell"&gt;git remote add origin https://github.com/&lt;username&gt;/vonage-send-sms.git
git push -u origin main
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Check out &lt;a href="https://docs.github.com/en/get-started/quickstart/create-a-repo"&gt;this guide&lt;/a&gt; on GitHub if you need help pushing your app.&lt;/p&gt;
&lt;h3&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#Create-a-Vercel-Account" title="Create-a-Vercel-Account"&gt;&lt;/a&gt;Create a Vercel Account&lt;/h3&gt;
&lt;p&gt;To get started with Vercel, go to &lt;a href="https://vercel.com/signup"&gt;https://vercel.com/signup&lt;/a&gt; to create a Vercel account. Choose Continue with GitHub and go through the registration process.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/send-receive-and-handle-sms-delivery-receipts-with-next-js-and-vonage/vercel-signup-page.png" alt="Vercel Sign Up Page" title="Vercel Sign Up Page"&gt;&lt;/p&gt;
&lt;h3&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#Import-your-vonage-send-sms-repository" title="Import-your-vonage-send-sms-repository"&gt;&lt;/a&gt;Import your &lt;code&gt;vonage-send-sms&lt;/code&gt; repository&lt;/h3&gt;
&lt;p&gt;After you’re signed up to Vercel and you push your app to GitHub, you can &lt;a href="https://vercel.com/new"&gt;import your repository&lt;/a&gt; into Vercel. You just need to give it access to your repository, or All Repositories on this step. You can do it here: &lt;a href="https://vercel.com/import/git"&gt;https://vercel.com/import/git&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/send-receive-and-handle-sms-delivery-receipts-with-next-js-and-vonage/vercel-new-project-page.png" alt="Vercel New Project Page" title="Vercel New Project Page"&gt;&lt;/p&gt;
&lt;p&gt;You can also deploy the sample repository we created for you in this step in one step with the deploy button If you want. But don’t forget to define Environment Variable Keys.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Femrecoban%2Fvonage-send-sms"&gt;&lt;img src="https://vercel.com/button" alt="Deploy with Vercel"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;When the deployment is complete, you will receive URLs. Click on one of the links to access the Vonage Send SMS form in its live version. It’s that easy!&lt;/p&gt;
&lt;p&gt;Once you deploy your app, Vercel will deploy every push by default.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;In order to send SMS to some countries (like Turkey), virtual numbers must comply with country specific regulations. &lt;a href="https://api.support.vonage.com/hc/en-us/sections/200622473-Country-Specific-Features-and-Restrictions"&gt;Checkout Country-Specific Features and Restrictions&lt;/a&gt; for more information.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;2. How to Receive SMS and SMS Delivery Receipts with Next.js&lt;/h2&gt;
&lt;p&gt;When you successfully request the SMS API, it sends you an array of message objects, with each message having a status of &lt;code&gt;0&lt;/code&gt; to indicate success. However, this does not guarantee that your recipients have received the message. To receive delivery receipts in our Next.js app, we must provide &lt;strong&gt;a webhook endpoint&lt;/strong&gt; for Vonage to send them to.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Create a webhook endpoint&lt;/li&gt;
&lt;li&gt;Create a handler for POST requests&lt;/li&gt;
&lt;li&gt;Add a response to the handler&lt;/li&gt;
&lt;li&gt;Configure the API Settings&lt;/li&gt;
&lt;li&gt;Receive an SMS and handle delivery receipts&lt;/li&gt;
&lt;/ol&gt;
&lt;h3&gt;1. Create a webhook endpoint&lt;/h3&gt;
&lt;p&gt;Create a new folder called &lt;code&gt;webhook&lt;/code&gt; inside &lt;code&gt;/app&lt;/code&gt;. Then, create a new folder one more called &lt;code&gt;status&lt;/code&gt; inside the &lt;code&gt;webhook&lt;/code&gt; folder. After that, create a new &lt;code&gt;route.js&lt;/code&gt; file inside the &lt;code&gt;status&lt;/code&gt; folder. The folder structure should look like this:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;.
└── vonage-send-sms
    └── app
        ├── webhook
        │   └── status
        │       └── route.js
        ├── page.js
        └── layout.js
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Since we will do exactly the same to capture incoming SMS, we will create another folder called &lt;code&gt;inbound&lt;/code&gt; with the &lt;code&gt;route.js&lt;/code&gt; file under the &lt;code&gt;webhook&lt;/code&gt; folder:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;.
└── vonage-send-sms
    └── app
        ├── webhook
        │   ├── status
        │   │   └── route.js
        │   └── inbound
        │       └── route.js
        ├── page.js
        └── layout.js
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#2-Create-a-handler-for-POST-requests" title="2-Create-a-handler-for-POST-requests"&gt;&lt;/a&gt;2. Create a handler for POST requests&lt;/h3&gt;
&lt;p&gt;We will create a handler for POST requests at &lt;code&gt;/webhook/status&lt;/code&gt; to handle delivery receipts and at &lt;code&gt;/webhook/inbound&lt;/code&gt; to handle incoming SMS messages. Then, we’ll log the body of the request to the console:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-javascript"&gt;export async function POST(request) {
    const res = await request.json();
    console.log("The request from Vonage: ", JSON.stringify(res, null, 2));
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Right now, you can see the message status on the logs and also add the message status to your database or something else.&lt;/p&gt;
&lt;h3&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#3-Add-a-response-to-the-handler" title="3-Add-a-response-to-the-handler"&gt;&lt;/a&gt;3. Add a response to the handler&lt;/h3&gt;
&lt;p&gt;Vonage will assume that you have not received the message and will keep resending it for the next 24 hours. This way, the webhook endpoint must send a &lt;code&gt;200 OK&lt;/code&gt; or &lt;code&gt;204 No Content&lt;/code&gt; response:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-javascript"&gt;export async function POST(request) {
    const res = await request.json();
    console.log("The request from Vonage: ", JSON.stringify(res, null, 2));

    return new Response("ok", {
      status: 200,
    });
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;&lt;a href="https://hackmd.io/xZLg5zcoQZugNV1OZaY8eQ?utm_source=comment-card&amp;utm_medium=icon#4-Configure-the-API-Settings" title="4-Configure-the-API-Settings"&gt;&lt;/a&gt;4. Configure the API Settings&lt;/h3&gt;
&lt;p&gt;Your webhook endpoint is now deployable on either Vercel, Netlify or your own server. After deploying your app, fill out each field by appending &lt;code&gt;/webhook/inbound&lt;/code&gt; and &lt;code&gt;/webhook/status&lt;/code&gt; to the Inbound SMS URL and Delivery Receipts URL in the &lt;a href="https://dashboard.nexmo.com/settings"&gt;API settings&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/send-receive-and-handle-sms-delivery-receipts-with-next-js-and-vonage/sms-settings-nextjs.png" alt="Configure SMS API Setting" title="Configure SMS API Setting"&gt;&lt;/p&gt;
&lt;h3&gt;5. Receive an SMS and handle delivery receipts&lt;/h3&gt;
&lt;p&gt;To see delivery receipts and incoming SMS messages on Vercel:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Choose your Next.js App from the &lt;a href="https://vercel.com/dashboard"&gt;Vercel Dashboard&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Go to your project overview and select the Logs tab.&lt;/li&gt;
&lt;li&gt;From here, you can see, filter, and search the runtime logs.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/send-receive-and-handle-sms-delivery-receipts-with-next-js-and-vonage/vercel-logs-display.png" alt="Vercel Runtime Logs" title="Vercel Runtime Logs"&gt;&lt;/p&gt;
&lt;p&gt;Now, send an SMS message through your Next.js application and you should be able to see the requests from Vonage on the runtime logs.&lt;/p&gt;
&lt;p&gt;The response from Vonage will look something like this:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-javascript"&gt;{
  "msisdn": "905423247231",
  "to": "***9512387",
  "network-code": "28603",
  "messageId": "4a3cf988-570f-4cdb-95be-179f89c64498",
  "price": "0.02380000",
  "status": "failed",
  "scts": "2311031929",
  "err-code": "1",
  "api-key": "******",
  "message-timestamp": "2023-11-03 19:29:32"
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;See &lt;a href="https://developer.vonage.com/en/messaging/sms/guides/delivery-receipts#understanding-the-delivery-receipt"&gt;Understanding the delivery receipt&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;To see how incoming SMS messages appear in the console log, send an SMS message from your phone to your Vonage number:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-javascript"&gt;{
  "msisdn": "905423247231",
  "to": "***9512387",
  "messageId": "2B00000018726238",
  "text": "Hi! This is test message from Emre!",
  "type": "text",
  "keyword": "HI!",
  "api-key": "******",
  "message-timestamp": "2023-11-03 19:55:15"
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;See &lt;a href="https://developer.vonage.com/en/messaging/sms/guides/inbound-sms#anatomy-of-an-inbound-message"&gt;Anatomy of an Inbound Message&lt;/a&gt;.&lt;/p&gt;
&lt;h1&gt;Conclusion&lt;/h1&gt;
&lt;p&gt;Now that you know how to send and receive SMS messages and get delivery receipts with the Vonage SMS API and Next.js. Consider expanding this project by replying to incoming SMS messages or adding more complex, interactive elements.&lt;/p&gt;
&lt;p&gt;As always, feel free to reach out on the &lt;a href="https://developer.vonage.com/en/community/slack"&gt;Vonage Developer Slack&lt;/a&gt; or &lt;a href="https://twitter.com/emreshepherd"&gt;Twitter&lt;/a&gt; for any questions or feedback. Thank you for reading, and I look forward to connecting with you next time.&lt;/p&gt;
&lt;p&gt;If you liked this post, reach out to Emre! He has been looking for a job for a long time :)&lt;/p&gt;
&lt;h1&gt;Further Resources&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.vonage.com/en/blog/enable-video-call-for-a-next-js-application-using-vonage-video-api"&gt;Enable Video Call for a Next.js Application Using Vonage Video API&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.vonage.com/en/blog/show-sms-notifications-in-the-browser-with-next-js-ably-and-vercel"&gt;Show SMS Notifications in the Browser with Next.JS, Ably, and Vercel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Next.js &lt;a href="https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations"&gt;Server Actions and Mutations&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Next.js &lt;a href="https://nextjs.org/docs/app/building-your-application/routing/route-handlers"&gt;Route Handlers&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</textarea></form>
Emre CobanGuest Author

Emre is a software developer focusing on Next.js and React. He is passionate about learning new things about programming and helping others learn programming language. In the past, he has experimented with different programming languages including Classic ASP, Java, and Python.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls-all at your fingertips.

Subscribe to Our Developer Newsletter

Subscribe to our monthly newsletter to receive our latest updates on tutorials, releases, and events. No spam.