Skip to content
VercelLogotypeVercelLogotype
LoginSign Up

Ably and Next.js Starter Kit

Ably + Next.js starter for serverless WebSocket, real-time notifications, activity streams, chat, collaborative multiplayer experiences etc.

DeployView Demo

Ably serverless WebSockets and Next.js fundamentals starter kit

Description

This Ably and Next.js fundamentals starter kit demonstrates using some of the Ably's core functionality with Next.js. You can build features and use cases upon these fundamentals such as notifications, activity streams, chat, realtime visualisations and dashboards, and collaborative multiplayer experiences.

The Ably fundamentals demonstrated within this repo are:

  • Token Authentication - authenticate and establish a persistent bi-direction connection to the Ably platform.
  • Pub/Sub (Publish/Subscribe) - publish messages on channels and subscribe to channels to receive messages.
  • Presence - keep track of devices that are present on a channel. This is great for tracking if a device is online or offline or indicating if a user is in a chat room when using Ably for Chat.
  • History - Retrieve a history of messages that have been published to a channel.

The project uses the following components:

  • Next.js, a flexible React framework that gives you building blocks to create fast web applications.
  • Ably, for realtime messaging at scale.

Building & running locally

Prerequisites

  1. Sign up or log in to ably.com, and create a new app and copy the API key.
  2. To deploy to Vercel, create a Vercel account.

Configure the app

Create a .env.local file with your Ably API key:

echo "ABLY_API_KEY={YOUR_ABLY_API_KEY_HERE}">.env

Run the Next.js app

npm run dev
# or
yarn dev

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Contributing

Want to help contributing to this project? Have a look at our contributing guide [blocked]!

More info

  • Join the Ably Discord server
  • Follow Ably on Twitter
  • Use the Ably SDKs
  • Visit the Ably website

GitHub
Ownerably-labs
Repositoryably-nextjs-fundamentals-kit
Use Cases
Realtime Apps
Stack
Next.js
CSS Modules

Related Templates

Next.js Boilerplate

Get started with Next.js and React in seconds.
Next.js Boilerplate thumbnail

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • EveNew
  • ConnectNew

Core Platform

  • CI/CD
  • Content Delivery
  • Fluid Compute
  • Observability

Security

  • Platform Security
  • WAF
  • Bot Management
  • Bot ID

Tools

  • Vercel DropNew
  • Vercel Agent
  • Vercel PluginNew
  • Next.js
  • Domains
  • v0

Frameworks

  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • xmcp
  • All frameworks

SDKs

  • Vercel SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDKNew
  • Queues SDKNew
  • Streamdown

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
  • Platform Engineers
  • Design Engineers

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Articles
  • Community

Explore

  • Customers
  • Marketplace
  • Templates
  • Partner Finder
  • Vercel + AWS

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Vercel
  • Open Source Program
  • Enterprise
  • Pricing
  • Help

Legal & Trust

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DPA
  • Acceptable Use Policy
  • Legal (all documents)
  • Trust Center
  • Status

Social

  • GitHub
  • X
  • LinkedIn
  • YouTube
  • Instagram
  • VercelVercel
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD
Tools
  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
EnterprisePricing
Contact
Log InSign Up
Dashboard

Products

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve

Core Platform

  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD

Tools

  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Resources

Learn

  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce

Explore

  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
Enterprise
Pricing
Sign UpLog In
Contact
DeployView Demo

Loading status…

Select a display theme: