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?
- Sign up or log in to ably.com, create a new app, and copy the API key.
- Create a
.env.local file with ABLY_API_KEY set to your key (the README also shows using a .env file).
- Run the app locally with
npm run dev or yarn dev.
- 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.
