Build realtime chat with Next.js and FluxyChat

Prerequisites

• Next.js 14+ App Router on Vercel (or elsewhere).
• FluxyChat hosted beta or self-hosted Worker + D1.
• pnpm add @fluxy-chat/sdk

1. Mint JWT server-side

// app/api/chat/token/route.ts
export async function POST(req: Request) {
  const { userId } = await req.json();
  const res = await fetch(`${process.env.FLUXY_WORKER_URL}/auth/token`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Fluxy-Api-Key": process.env.FLUXY_API_KEY!,
    },
    body: JSON.stringify({ userId, roles: ["member"], ttlSeconds: 3600 }),
  });
  return Response.json(await res.json());
}

2. Client room component

"use client";
import { FluxyChatClient } from "@fluxy-chat/sdk";
import { useChat } from "@fluxy-chat/react";

const client = new FluxyChatClient({
  baseUrl: process.env.NEXT_PUBLIC_FLUXYCHAT_CLOUD_URL!,
  userId,
  token: memberJwt,
});

export function RoomChat({ roomId }: { roomId: string }) {
  const { messages, sendMessage, connectionState, loadMore, hasMore } =
    useChat({ roomId, client, replay: "connect" });

  return (/* render messages + connectionState + loadMore button */);
}

3. Reconnect and history

• Show connectionState.status and nextRetryAt in the UI.
• Call loadMore() after refresh or reconnect.
• Use clientMessageId for idempotent retries on failed sends.

4. Deploy split

Keep Next on Vercel; Worker on Cloudflare. Same pattern as the Nuxt-on-Pages tutorials: different import, same split.

If you landed here from a Next.js realtime chat tutorial and do not want Socket.IO on a VPS, this is the packaged version of that split.

How to Build a Realtime Chat App on Cloudflare Workers (Without Managing a Socket Fleet) →