Next.js にリアルタイム機能を2分で追加できる「Upstash Realtime」とは

Next.js へのリアルタイム機能追加は、なぜこんなに大変なのか 💀

ここでいうリアルタイム機能とは、たとえば次のようなものです。

• Vercel AI SDK のリアルタイムストリーミング
• ライブダッシュボード
• リアルタイム通知やステータス更新
• ライブカーソルや「現在オンライン」のユーザー表示
• ファイルアップロードや長時間実行タスクの進捗トラッキング

こうした用途に特化した SaaS が存在しないわけではありません。むしろ、すでに複数のサービスが提供されています。しかし、どれも一長一短がありました。

• Ably: 料金が高く、価格体系もわかりにくい
• Pusher: 型安全ではなく、開発者体験も決して良くない
• Convex / Supabase: 素晴らしいサービスだが、リアルタイム機能だけ使うためにスタック全体を移行するのは現実的ではない

Upstash Realtime が目指したもの

私たちが必要としていたのは、次の条件をすべて満たすリアルタイムサービスでした。

• フロントエンドからバックエンドまで 100% 型安全
• Vercel をはじめとするサーバーレスプラットフォームにそのままデプロイ可能
• 接続時間ではなく、イベント数ベースの課金
• Neon、PlanetScale など、既存のあらゆるデータベースと組み合わせて使える

そこで私たちは、これらをすべて満たす Upstash Realtime の開発を始めました。任意の Next.js アプリにリアルタイム機能を追加するための、最も簡単な方法です。セットアップはわずか2分。Vercel、Cloudflare など、好きなプラットフォームにそのままデプロイできます。

既存の手法がどうしても気に入らなかった理由 🤡

Realtime のアイデアは、オープンソースの SaaS「Contentport」を開発していたときに生まれました。Contentport でツイートを投稿すると、投稿処理は Upstash Workflow 上で実行され、失敗時には自動的にリトライされます。

この仕組みにより、Twitter API がダウンしていても、AI プロバイダーに障害が発生していても、その他何が起きても、投稿者に対して極めて高い信頼性を保証できます。

しかし、この処理はバックグラウンドジョブとして動作するため、クライアントとの接続が存在しません。つまり、「処理中」「投稿中」「成功」のような現在のステータスをクライアントに伝える手段がないのです。

ステータス更新をリアルタイムにクライアントへ送信するには、何らかのメッセージブローカーが必要でした。

Pusher には正直あまり満足していませんでしたし、リアルタイム機能のためだけに既存の Neon Postgres データベースを Convex へ移行したくもありませんでした。ところが調べてみると、私たちの最も成熟したプロダクトである Upstash Redis には、この仕組みを実現するために必要なものがすべて揃っていたのです。それが Pub/Sub と Redis Streams です。

クイックスタート:実際のコード例

それでは、サーバーアクションからクライアントへリアルタイム更新を送るシンプルな例を見てみましょう。

1. パッケージのインストール

npm install @upstash/realtime

2. zod でイベントスキーマを定義

lib/realtime.ts

import { InferRealtimeEvents, Realtime } from "@upstash/realtime";
import z from "zod/v4";
import { redis } from "./redis";
 
const schema = {
 notification: z.object({
 message: z.string(),
 }),
};
 
const realtime = new Realtime({ schema, redis });
export type RealtimeEvents = InferRealtimeEvents<typeof realtime>;

3. ルートハンドラからイベントを送信

route.ts

import { realtime } from "@/lib/realtime";
 
await realtime.emit("notification", { message: "Hello world!" });

4. React コンポーネントでイベントを購読

page.tsx

import { RealtimeEvents } from "@/lib/realtime";
import { useRealtime } from "@upstash/realtime/client";
 
useRealtime<RealtimeEvents>({
 event: "notification",
 onData: ({ message }) => {
 console.log(message);
 },
});

以上です!これだけで、サーバーからクライアントへの完全に型安全なリアルタイム更新が実現できます。

注意点:Pusher の完全な代替ではない

Upstash Realtime は Pusher の 1対1 の代替品として設計されたわけではありません。Pusher がソケット接続を使用するのに対し、Upstash Realtime は HTTP ベースだからです。

HTTP の方が一般的には信頼性が高いのですが、毎秒15〜20件を超えるような超高頻度の更新については、ソケット接続を持つ Pusher を推奨します。

一方、それ以外のユースケース——Vercel AI SDK による高頻度の AI チャンク更新、ライブダッシュボード、リアルタイムチャットなど——においては、Upstash Realtime を第一の選択肢にできるよう開発を進めています。

導入はとても簡単なので、ぜひ一度試してみてください!

最後までお読みいただきありがとうございます 🙌 ご質問やフィードバックがあれば、X(Twitter)の @joshtriedcoding まで直接ご連絡ください。