リアルタイム機能を Next.js に簡単に統合

Next.js にリアルタイム機能を追加するのは最悪です 💀

つまり、次のようなことです。

• Vercel AI SDK のリアルタイム ストリーム
• ライブダッシュボード
• ライブ通知とアップデート
• ライブ カーソルまたは「誰がオンラインか」インジケーター
• ファイルのアップロードまたは長時間実行されるタスクの進捗状況の追跡

そしてこれは決して、この目的だけに使用できる SaaS が不足しているためではありません。既存のサービスは次のとおりです。

• 高価で価格設定が不明確（Ably）
• 開発者エクスペリエンスが悪くタイプセーフではない（プッシャー）
• 素晴らしい (Convex、Supabase) が、スタック全体を移行せずにリアルタイムで追加するのは難しい

Upstash Realtime の目標

私が望んでいたリアルタイム サービスは、

• フロントエンドとバックエンドで 100% タイプセーフ
• Vercel およびその他のサーバーレス プラットフォームに導入可能
• 料金は接続時間ではなくイベントに基づいて計算されます
• 既存のデータベース（Neon、Planetscale、その他すべて）で使用可能

したがって、私たちはまさにそれを実現するために Upstash Realtime を構築しています。 Next.js アプリにリアルタイム機能を追加する最も簡単な方法。セットアップには 2 分かかり、Vercel、Cloudflare などに展開できます。

これを行う既存の方法はすべて嫌いでした 🤡

Realtime のアイデアは、Contentport と呼ばれるオープンソース SaaS の構築から得ました。 contentport 経由でツイートを投稿すると、Upstash ワークフローで投稿ロジックが実行され、失敗すると自動的に再試行されます。

こうすることで、Twitter API がダウンしている場合でも、AI プロバイダーが停止したりその他の何かが発生したりすることがあります。 問題が発生した場合でも、投稿者に対して非常に高い信頼性を保証できます。

ただし、このロジックはバックグラウンド ジョブで実行されるため、クライアントと投稿ロジックの間に接続はありません。言い換えれば、現在のステータス (「処理中」、「投稿」、「成功」など) をクライアントに伝える方法はありません。

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

私は Pusher には非常に不満があり、リアルタイム機能のためだけに既存の Neon Postgres データベースを Convex に移行したくありませんでした。そして、私たちの最も成熟した製品である Upstash Redis には、Pub/sub と Redis ストリームなど、この作業を行うために必要なものがすべて揃っていることがわかりました。

簡単な例

サーバー アクションからクライアントにリアルタイム更新を送信する簡単な例を構築してみましょう。

まず、パッケージをインストールします。

npm install @upstash/realtime

次に、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>;

任意のルート ハンドラーでイベントを送信します。

ルート.ts

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

React コンポーネントでイベントをサブスクライブします。

page.tsx

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

それです！サーバーからクライアントまで完全にタイプセーフなリアルタイム更新が可能になりました。

免責事項

Upstash Realtime は、Pusher のようなソケットではなく HTTP を使用するため、1:1 Pusher の代替品としては意図されていません。

したがって、おそらく HTTP の方が信頼性が高くなりますが、非常に高い頻度で更新する場合 (1 秒あたり 15 ～ 20 回を超える)、ソケット接続の点で Pusher をお勧めします。

しかし、Vercel の AI SDK からの高頻度の AI チャンク更新、ライブ ダッシュボード、ライブ チャット メッセージなど、その他の用途では、頼りになる Upstash Realtime を構築しています。

とても簡単に始めることができるので、ぜひ試してみてください。

読んでいただきありがとうございます! 🙌 ご質問やフィードバックがありますか? @joshtriedcoding まで直接ご連絡ください。