Enviar SMS desde Nextjs usando Twilio

Requerimientos

• Cuenta de Twilio

¿Qué es Twilio?

Crear proyecto de nextjs

npx create-next-app nextjs-sms-twilio     
Need to install the following packages:
  create-next-app@13.5.5
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/fazt/Desktop/nextjs-sms-twilio.

Luego vamos a limpiar un poco el proyecto

Instalación de Twilio

Ahora vamos a instalar Twilio

npm i twilio

creacion de api en el archivo src/app/api/sms

import { NextResponse } from "next/server";
import twilio from "twilio";

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = twilio(accountSid, authToken);

export async function GET() {
  try {
    const message = await client.messages.create({
      body: "This is the ship that made the Kessel Run in fourteen parsecs?",
      from: "+14252791504",
      to: "+70123456789",
    });
    console.log(message.sid);

    return NextResponse.json(
      { message: "Message sent" },
      {
        status: 200,
      }
    );
  } catch (error) {
    console.error(error);
  }
}

Para hacer funcionar esto es necesario crear las siguientes variables de entorno:

y luego el siguiente codigo de Frontend:

"use client"
import axios from "axios";
import { toast } from "sonner";

function Page() {
  const onSubmit = async (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);

    const data = {
      phone: formData.get("phone"),
      message: formData.get("message"),
    };

    const res = await axios.post("/api/sms", data);
    if (res.status === 200) {
      toast.success("Message sent");
    }
  };

  return (
    <div className="flex items-center justify-center h-screen">
      <form action="" className="bg-slate-950 p-10" onSubmit={onSubmit}>
        <h1 className="text-white text-3xl font-bold">Send an SMS</h1>
        <label htmlFor="phone" className="text-white block my-4">
          Write your phone number
        </label>
        <input
          name="phone"
          type="tel"
          placeholder="+123456789"
          className="px-3 py-1 rounded-md"
        />

        <label htmlFor="message" className="text-white block my-4">
          Write your Message
        </label>
        <textarea
          name="message"
          placeholder="Hello World ..."
          className="px-3 py-1 rounded-md w-full"
        />
        <button className="bg-blue-500 text-white px-3 py-1 rounded-md mt-4 block">
          Send
        </button>
      </form>
    </div>
  );
}

export default Page;

finalmente vamos a atualizar el codigo de backend de la siguiente forma:

import { NextResponse } from "next/server";
import twilio from "twilio";

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = twilio(accountSid, authToken);

export async function POST(request) {
  try {
    const data = await request.json();
    const message = await client.messages.create({
      body: data.message,
      from: "+14252797504",
      to: data.phone,
    });
    console.log(message.sid);

    return NextResponse.json(
      { message: "Message sent" },
      {
        status: 200,
      }
    );
  } catch (error) {
    console.error(error);
  }
}

Con esto ahora puedes enviar mensajes de textos desde tu aplicación web desarrollada en Nextjs.

Whatsapp

Adicionalmente tambien puedes enviar mensajes de Whastapp simplemente añadiendo el texto whatsapp: al inicio de cada numero, pero este si tiene que ser un numero comprado y no uno de trial. Y el costo del numero varia dependendiendo del pais, por ejemplo los numeros de estados unidos cuestan al rededor de 1$

import { NextResponse } from "next/server";
import twilio from "twilio";

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = twilio(accountSid, authToken);

export async function POST(request) {
  try {
    const data = await request.json();
    const message = await client.messages.create({
      body: data.message,
      from: "whatsapp:+123456789",
      to: `whatsapp:${data.phone}`
    });
    console.log(message.sid);

    return NextResponse.json(
      { message: "Message sent" },
      {
        status: 200,
      }
    );
  } catch (error) {
    console.error(error);
  }
}

Como notas en el código lo unico que cambia es el from y el to.

Más Recursos

• https://www.twilio.com/docs/messaging/quickstart/node