Upstash Realtime is the easiest way to add realtime features to any Next.js project.
Why Upstash Realtime?
- ⏰ Setup takes 60 seconds
- 🧨 Clean APIs & first-class TypeScript support
- ⚡ Extremely fast, zero dependencies, 1.9kB gzipped
- 💻 Deploy anywhere: Vercel, Netlify, etc.
- 💎 100% type-safe using zod v4 or zod mini
- 🔌 Automatic connection management w/ message delivery guarantee
- 🔋 Built-in middleware and helpers - batteries included
- 📶 HTTP-based: Redis streams & server-sent events
Quickstart
Get Upstash Realtime running in your Next.js app in under 60 seconds.
1. Installation
npm install @upstash/realtime
UPSTASH_REDIS_REST_URL=https://striking-osprey-20681.upstash.io
UPSTASH_REDIS_REST_TOKEN=AVDJAAIjcDEyZ...
import { Redis } from "@upstash/redis"
export const redis = new Redis({
url: process.env.UPSTASH_REDIS_REST_URL,
token: process.env.UPSTASH_REDIS_REST_TOKEN,
})
3. Define Event Schema
Define the structure of realtime events in your app:
import { Realtime, InferRealtimeEvents } from "@upstash/realtime"
import { redis } from "./redis"
import z from "zod"
const schema = {
notification: z.object({
alert: z.string(),
}),
}
export const realtime = new Realtime({ schema, redis })
export type RealtimeEvents = InferRealtimeEvents<typeof realtime>
4. Create Realtime Route Handler
Create your realtime endpoint under /api/realtime/route.ts:
It’s important that your route matches this path exactly: /api/realtime/route.ts
app/api/realtime/route.ts
import { handle } from "@upstash/realtime"
import { realtime } from "@/lib/realtime"
export const GET = handle({ realtime })
5. Emit Events
From any server component or API route:
import { realtime } from "@/lib/realtime"
export const POST = async () => {
// 👇 100% type-safe
await realtime.notification.alert.emit("Hello world")
return new Response("OK")
}
6. Subscribe to Events
In your client components:
app/components/notifications.tsx
"use client"
import { useRealtime } from "@upstash/realtime/client"
import type { RealtimeEvents } from "@/lib/realtime"
export default function Notifications() {
useRealtime<RealtimeEvents>({
events: {
notification: {
alert: (data) => console.log(data),
},
},
})
return <div>Listening for events...</div>
}
That’s it! Your app is now listening for realtime events with full type safety. 🎉
Next Steps
