Receive SMS to Next.js application

After this walk-through you will be able to:

1. Send an SMS to a virtual number
2. Receive the SMS to your Next.js API
3. Send an e-mail from your API, containing the SMS message

The services we’re using:

• 46elks to receive SMS
• Vercel to host your webhook and your Next.js application
• Mailjet to send e-mails

Prerequisites:

• Next.js application setup with Typescript
• A 46elks account (free) and a 46elks virtual number (not free)
• A Mailjet account (free)
• A Vercel account (free)

First step, get the API keys

We need the API keys from 46elks and Mailjet.

46elks

Go to 46elks.com. Your API keys will be found under “Account”.

Mailjet

Go to “Account settings”:

Press “Master API-Key & Sub API key management”

And there you go :)

Create an api route

To create an API route in Next.js you simply add a file under the /api directory. I want my route to be /api/sms so I’ll add a sms.tsx file in the /api directory.

Copy and paste this code to your new file:

In order to make it run, you need to install two packages:

1. npm install node-mailjet
2. npm install --save-dev @types/node-mailjet (if you’re using TypeScript)

Change <your email>, <your recipients email> and <your recipients name> to your needs.

Also create a file called .env.local in your project’s root directory, with the following contents:

MAILJET_UID=<your mailjet api key>
MAILJET_PWD=<your mailjet secret key>

Deploy your code to Vercel

In my personal experience, I’ve found that the easiest way to deploy to Vercel is to push everything to Github and then connect your Github account to Vercel.

Use this command to push your Next.js project to a Github repo.

# Push an existing repository from the command line 
git remote add origin <your git repo url>
git push -u origin master

Go to Vercel, “New project” and press “Import Git repository”:

When you see this page you need to enter your environment variables:

Environment variables

We need environment variables. Both in Vercel and also locally. We already have them locally so what’s left is to enter them into Vercel.

Enter them in Vercel like this:

Go ahead and press “Deploy” after you’ve added these variables.

Enter your URL in 46elks

When Vercel is done deploying you should see something like this:

Press “Visit” to get your public URL to your serverless function.

Go to your 46elks account

And go to “Numbers”, buy a number if you don’t have one already, and click “edit”. You should see this page:

Enter <your vercel url>/api/sms into sms_url. This will tell 46elks that when someone sends a SMS to your 46elks number, they should send a request to your Vercel serverless function.

Test it

When this is done, you can try to send a SMS to your 46elks number and see if you get an E-mail. Mine looks like this:

Concepts

We’ve covered how to receive a SMS to your Next.js application using a webhook. And also how to send an e-mail containing the SMS message from your Next.js application.

I would like to point out that this code works well in most situations, for example, instead of sending an e-mail you could save the SMS to a database.

Thank you for reading!

I hope this walk-through was helpful, comment if you want more in-depth tutorials on example apps or explanation of how something works etc.

Find the final code snippet here.

I also welcome you to join me for other tutorials.