Building a realtime chat app with Next.js and Vercel

This post will walk through the creation of a realtime chat application with Next.js and deploying it to Vercel.

You'll learn how to:

• Create a brand new Next.js application
• Adding realtime functionality with Ably
• Create a Next.js Vercel Serverless API
• Use React Functional components and React Hooks with Ably
• Host your app on Vercel

Check out a running version of the app or fork the app on GitHub.

WebSockets in Vercel with Ably

Vercel allows users to deploy Serverless Functions, which are essentially just blocks of code that provide a response to an HTTP request. However, these functions have a maximum execution timeout, which means that it is not possible to maintain a WebSocket connection this way.

This is where Ably comes in. The client can connect to an Ably Channel and send and receive messages on it to add realtime functionality to your app by managing your WebSocket connections for you.

We’ll start by going over how to build an app that uses realtime functionality. If you prefer, you can jump straight to how to use Ably with Vercel.

Take a look at some of the challenges of implementing a reliable and highly-performant client-side WebSocket solution for JavaScript apps.

This is absolutely wonderful. Think serverless https://t.co/KQPuGDLPMl! https://t.co/LGoHjcrYZQ

— Guillermo Rauch (@rauchg)March 2, 2021

What are we going to build?

We’re building a realtime chat app that runs in the browser. It will be built upon the Next.js create-next-app template and contain a React component that uses Ably to send and receive messages. We'll also write a Next.js serverless function that will be used to connect to Ably.

Dependencies

To build this app, you’ll need:

• An Ably account for sending messages: Create an account with Ably for free.
• A Vercel account for hosting on production: Create an account with Vercel for free.
• Node 16.14 or greater: Install Node.

Once you have your Ably account you'll need an API key to authenticate with the Ably Service. To get an API key:

1. Visit your app dashboard and click on "Create New App".
2. Give the new app a name.
3. Copy the Private API key once the app has been created. Keep it safe, this is how you will authenticate with the Ably service.

Vercel provides Next.js command line tools to help us. They don't need to be installed on your system as they're executed using npx.

Scaffolding the Next.js Chat App

Start building the chat application by using create-next-app to scaffold a new Next.js-based application. In your terminal, type:

npx create-next-app@latest

Answer the prompts as follows:

What is your project named? nextjs-chat-app
Would you like to use TypeScript? No
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? No
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
What import alias would you like configured? @/*

  After the prompts, create-next-app will create a folder with your project name and install the required dependencies. Change directories into your application directory:  

cd nextjs-chat-app

 Next, create a file called .env in the root of the directory. This is where we'll put the project's environment variables. Add your Ably API key to the .env file: 
 

ABLY_API_KEY=your-ably-api-key:goes-here

Test that the application runs correctly by running the following command:

npm run dev

The Next.js dev server will spin up and you'll see an default Next.js starter app. This is what we'll build our chat app on top of.