Next.js WebSockets on Vercel: upgradeWebSocket, Redis Fan-Out, and Surviving Deploys

Next.js has no WebSocket API, so Vercel added upgradeWebSocket() to @vercel/functions 3.10.0. Getting an echo server running takes minutes; a chat or presence feature that works across instances and deploys needs four more pieces. A build order for a production-ready Next.js realtime feature on Vercel.

In a Next.js route handler, a GET that returns upgradeWebSocket((ws) => { ... }) from @vercel/functions (version 3.10.0 or later) accepts a WebSocket connection, and ws.on('message') and ws.send() work as you'd expect. That is the echo server. The rest of this post is what a real feature needs on top.

Build order

1. Authenticate on upgrade: read the session from the request before accepting, and close with an error code the client understands.

2. Store first, then broadcast: write each message to the durable store with a sequence number, then publish it to Redis so every instance relays it to its own sockets.

3. Reconnect on the client with exponential backoff capped at about 30 seconds, plus random jitter, then send the last sequence number seen and replay what was missed.

4. Set maxDuration deliberately. Longer means fewer reconnects; shorter means old deployments drain faster. Either way the client must expect the close.

5. Version your messages, because for up to the max duration two deployments are talking to clients at once.

6. Load-test a reconnect storm: close every connection at once and watch the upgrade rate limit, Redis and your database.