Skip to main content
Upstash Realtime is the easiest way to add realtime features to any Next.js project.
Upstash Realtime

​
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 with zod 4 or zod mini
  • ⏱️ Built-in message histories
  • 🔌 Automatic connection management w/ delivery guarantee
  • 🔋 Built-in middleware and authentication helpers
  • 📶 100% HTTP-based: Redis streams & SSE

​
Quickstart

Get Upstash Realtime running in your Next.js app in under 60 seconds.

​
1. Installation

npm install @upstash/realtime

​
2. Configure Upstash Redis

Upstash Realtime is powered by Redis Streams. Grab your credentials from the Upstash Console.
Add them to your environment variables:
.env
UPSTASH_REDIS_REST_URL=https://striking-osprey-20681.upstash.io
UPSTASH_REDIS_REST_TOKEN=AVDJAAIjcDEyZ...
And lastly, create a Redis instance:
lib/redis.ts
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:
lib/realtime.ts
import { Realtime, InferRealtimeEvents } from "@upstash/realtime"
import { redis } from "./redis"
import z from "zod"

const schema = {
  notification: {
    alert: z.string(),
  },
}

export const realtime = new Realtime({ schema, redis })
export type RealtimeEvents = InferRealtimeEvents<typeof realtime>

​
4. Create Realtime Route Handler

Create a route handler at 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, server action, API route:
app/api/notify/route.ts
import { realtime } from "@/lib/realtime"

export const POST = async () => {
  // 👇 event name and data are 100% type-safe
  await realtime.emit("notification.alert", "hello world!")

  return new Response("OK")
}

​
6. Subscribe to Events

In any client component:
app/components/notifications.tsx
"use client"

import { useRealtime } from "@upstash/realtime/client"
import { RealtimeEvents } from "@/lib/realtime"

export default function Notifications() {
  useRealtime<RealtimeEvents>({
    event: "notification.alert",
    onData(data, channel) {
      // 100% type-safe
    },
  })

  return <p>Listening for events...</p>
}
That’s it! Your app is now listening for realtime events with full type safety. 🎉

​
Next Steps

Client-Side Usage

Complete guide to the useRealtime hook

Server-Side Usage

Subscribe to events and stream updates on the server

Channels

Scope events to specific rooms or channels

History

Fetch and replay past messages
⌘I