Boilerplate

An end-to-end example that wires incoming webhooks to real-time updates using Server-Sent Events (SSE) with Redis Pub/Sub as the transport.

Designed for serverless platforms (e.g., Vercel) where requests run in isolated instances—Redis provides the shared, persistent message bus.

Features

• Next.js App Router (frontend) + API Routes (backend)
• /api/webhook → receives messages and publishes to Redis
• /api/sse/[id] → subscribes to Redis and streams events via SSE
• Minimal Next.js page that connects to SSE and renders messages
• Works in serverless environments (no in-memory state)

Stack

• Next.js 16 (App Router + API Routes)
• Redis (Pub/Sub). Works with Upstash, Redis Cloud, self-hosted, etc.
• ioredis client (recommended for Node serverless functions)
• TypeScript

Serverless notes

• Do not use in-memory arrays to store connections/messages; each request runs in a fresh isolated runtime. Redis (or another external bus) is required.
• Add heartbeats (ping) to keep connections alive through proxies.
• Prefer short-lived Redis connections: duplicate a subscriber per request and quit on close.
• Protect /api/webhook with a signature and rate limiting if exposed publicly.

Use cases

• Real-time dashboards & activity feeds
• Webhook fan-out to browsers (e.g., payment, analytics, CI events)
• Live rooms/rooms-by-id without WebSockets complexity

With this boilerplate you get a clean, serverless-friendly pattern to bridge webhooks → Redis → SSE in Next.js.