Ably Next.js Fundamentals Starter Kit

The Ably serverless WebSockets and Next.js fundamentals starter kit is a boilerplate repository from Ably Labs that demonstrates Ably's realtime messaging features — token authentication, pub/sub, presence, and history — inside a Next.js application.

What is the Ably Next.js fundamentals starter kit?

The starter kit is a GitHub project that integrates Next.js with Ably, a realtime messaging platform, to show how to build realtime features on top of these foundations. It takes an Ably API key as configuration and produces a runnable Next.js app with working realtime channels, presence tracking, and message history. The project is maintained by Ably Labs and distributed as open source through the ably-labs GitHub organization.

Key Features

• Token Authentication — Authenticates clients and establishes a persistent bi-directional connection to the Ably platform using Ably's token authentication flow.
• Pub/Sub (Publish/Subscribe) — Publish messages on channels and subscribe to channels to receive messages in realtime, enabling two-way communication.
• Presence — Tracks which devices are present on a channel, useful for online/offline status and for showing users in a chat room.
• History — Retrieves a history of messages that have been published to a channel, so new subscribers can load past events.
• Next.js framework — Built with Next.js, a React framework for creating fast web applications, and designed to run with npm run dev or yarn dev.
• One-click Vercel deployment — Includes a Deploy with Vercel button that clones the repository and sets up the ABLY_API_KEY environment variable for instant hosting.

Who is it for?

• Next.js developers who want to add realtime capabilities such as chat or live updates without managing WebSocket infrastructure themselves.
• Product teams planning to build notifications, activity streams, realtime dashboards, or collaborative multiplayer features on Ably's platform.
• Developers learning Ably who need working reference code for token auth, pub/sub, presence, and history APIs.

What can you do with the starter kit?

• Add realtime chat: Combine pub/sub and presence to create chat rooms where connected users can see who is online and exchange messages instantly.
• Build live dashboards: Publish event data to a channel and have the Next.js UI subscribe and re-render in realtime as data arrives.
• Create collaborative multiplayer experiences: Use presence and pub/sub to sync user actions across clients, with history providing context for late joiners.
• Send notifications and activity streams: Publish messages that all subscribers receive immediately, supporting in-app notification feeds.

How does the starter kit work?

1. Sign up or log in to ably.com, create a new app, and copy the API key.
2. Create a .env.local file with ABLY_API_KEY set to your key (the README also shows using a .env file).
3. Run the app locally with npm run dev or yarn dev.
4. Deploy to Vercel using the provided button, which clones the repo and prompts for the ABLY_API_KEY environment variable.

FAQ

What Ably features does this starter kit demonstrate?

It demonstrates token authentication, pub/sub, presence tracking, and history. These are the core building blocks that let you add realtime features like chat, live notifications, and dashboards to a Next.js app.

How do I get an Ably API key?

Sign up or log in to ably.com, create a new app from the dashboard, and copy the API key. That key is what the starter kit uses to authenticate with Ably's platform.

Can I deploy this project to Vercel?

Yes. The repository includes a Deploy with Vercel button that clones the project and sets up the ABLY_API_KEY environment variable, making deployment a one-click process.

What do I need to run it locally?

You need Node.js and an Ably API key. After placing the key in a .env.local file, run npm run dev or yarn dev to start the Next.js development server.