AnyCable Next.js/Vercel Example

AnyCable Next.js/Vercel Example is a demonstration repository that connects an AnyCable-Go WebSocket server to a Next.js application hosted on Vercel, so serverless route handlers can broadcast real-time messages to connected browser clients.

What is AnyCable Next.js/Vercel Example?

AnyCable Next.js/Vercel Example is an open-source GitHub repository (anycable/vercel-anycable-demo) showing how to run real-time features inside a serverless Next.js app. The Next.js side supplies a route handler at /api/anycable that acts as the AnyCable RPC endpoint, and the browser client connects over a WebSocket URL supplied by the CABLE_URL variable. The output is a deployable real-time demo that can be cloned to Vercel with one click and paired with a separate AnyCable-Go process. It is published by the AnyCable project and points to the official serverless JavaScript guide in the AnyCable docs.

Key Features

• Next.js framework — the app runs on Next.js and is packaged for Vercel, with the RPC endpoint exposed as a serverless function at /api/anycable.
• Separate AnyCable-Go server — real-time traffic is handled outside Vercel by the Docker image anycable/anycable-go:1.4, deployed on any platform and recommended on Fly.io.
• One-click Vercel deploy — the Deploy button clones vercel-anycable-demo and prompts for CABLE_URL, ANYCABLE_HTTP_BROADCAST_URL, ANYCABLE_HTTP_BROADCAST_SECRET, and ANYCABLE_JWT_ID_KEY during setup.
• JWT identification — AnyCable's JWT identification feature issues tokens so clients are verified at the WebSocket server without extra requests back to Vercel functions; the ANYCABLE_JWT_ID_KEY variable holds the key.
• HTTP broadcasting — outgoing messages from Vercel are sent to the AnyCable broadcast endpoint, secured by the shared ANYCABLE_HTTP_BROADCAST_SECRET value.
• Fly.io configuration example — a fly.toml.example file documents recommended settings, and the provided fly launch command uses --internal-port 8080, --ha=false, and ANYCABLE_BROKER=memory.
• Secrets and env tooling — environment variables can be imported with cat .env.production | fly secrets import on Fly, or pulled with vercel env pull locally.
• PNPM local workflow — pnpm install, pnpm anycable-go, and pnpm dev start the stack on local port 3000.

Who should use this template?

• Next.js developers adding real-time features: use the repo as the reference wiring for connecting a Vercel-hosted app to an external AnyCable-Go WebSocket server.
• Serverless teams hitting function limits: teams that cannot hold persistent WebSocket connections inside Vercel functions can move the socket layer to AnyCable-Go while keeping their API routes on Vercel.
• Self-hosting advocates: developers who want to run their own real-time server on Fly.io or another host instead of paying a hosted pub/sub provider.

How does it work?

1. Deploy an AnyCable-Go server (the docs recommend Fly.io) and note its hostname.
2. Set CABLE_URL, ANYCABLE_HTTP_BROADCAST_URL, ANYCABLE_HTTP_BROADCAST_SECRET, and ANYCABLE_JWT_ID_KEY on the Vercel app.
3. Set ANYCABLE_RPC_HOST to the Vercel app's /api/anycable endpoint, plus the same broadcast secret and JWT key, on the AnyCable-Go server.
4. Clients open a WebSocket to the AnyCable-Go host; broadcasts flow through the HTTP broadcast URL and RPC calls come back to the Vercel function.

Use cases

• Real-time chat: clone the demo and extend it into a room-based messaging app where messages are broadcast through AnyCable-Go rather than held open in a Vercel function.
• Live dashboards and notifications: push server-side events from a Next.js route handler to many connected browsers without maintaining a long-lived connection in the serverless runtime.
• Prototyping a real-time architecture: validate the JWT-identification flow and broadcast secret setup before migrating a larger application off a hosted pub/sub service.

Pricing

The example repository is open source and free to clone, and AnyCable-Go runs as a self-hosted Docker image; the only costs come from whatever hosting you choose for the Next.js app (Vercel) and the real-time server (for example Fly.io).

Alternatives

• Pusher — a hosted real-time messaging service rather than a self-hosted WebSocket server.
• Ably — a managed pub/sub platform for real-time messaging.
• Supabase Realtime — real-time subscriptions bundled with the Supabase platform.

FAQ

What does this template actually do?

It demonstrates the full path between a Next.js app on Vercel and an AnyCable-Go WebSocket server: the app exposes an RPC endpoint at /api/anycable, broadcasts outgoing messages over HTTP, and authenticates connecting clients with AnyCable JWT identification.

Do I need to deploy a separate server?

Yes. The Next.js app on Vercel cannot host the WebSocket connection itself, so an AnyCable-Go server must run somewhere else. The docs recommend Fly.io and ship a fly.toml.example with a working fly launch command, but AnyCable-Go can be deployed on any platform.

Is the template free?

Yes, the repository is a public open-source example with no license fee, and AnyCable-Go is pulled as a Docker image. You still pay for the infrastructure you run it on, such as Vercel and Fly.io usage.

How can I run it locally?

PNPM is required. Run pnpm install, start the real-time server with pnpm anycable-go, start the app with pnpm dev, then open local port 3000 in a browser.

What are the environment variables for?

CABLE_URL is the WebSocket address clients connect to, ANYCABLE_HTTP_BROADCAST_URL is the broadcast endpoint, ANYCABLE_HTTP_BROADCAST_SECRET is a shared secret for that endpoint, and ANYCABLE_JWT_ID_KEY signs and verifies client identification tokens; the secrets can be any string, such as one generated with openssl rand -hex 32.