mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
56fe894489
## Summary Modernizes the `examples/with-ably` example off the deprecated Pages Router and `@ably-labs/react-hooks` package, onto the App Router and the React hooks that ship with ably-js v2. The previous example created the Realtime client at module scope inside `pages/_app.tsx`, which caused connections to be created during SSR. The rewrite creates it inside a `useEffect` in a client component (`app/ably-client-provider.tsx`), gated by an `AblyReadyContext` so consumer components don't try to call `ably/react` hooks before the provider is in place. ## Notable changes - Replace Pages Router with App Router. - Upgrade `ably` to v2; drop `@ably-labs/react-hooks` (hooks now ship as `ably/react`). - Bump React, react-dom and their `@types` to v19 to match recently-modernized examples like `with-supabase`. - `app/api/createTokenRequest/route.ts` now returns 400 when `clientId` is missing rather than coalescing to a shared `"NO_CLIENT_ID"` value. - Various improvements to README.md ## How I tested these changes Ran the example with Chrome and Firefox. Verified in two browser windows: - Pub/sub: messages published from one window appear in both. - Server publish: `POST /api/send-message` round-trips and broadcasts. - Presence: events propagate between windows. - No errors or warnings in browser console or dev console. Co-authored-by: Fiona Corden <[email protected]>
24 lines
741 B
TypeScript
24 lines
741 B
TypeScript
import * as Ably from "ably";
|
|
import { type NextRequest, NextResponse } from "next/server";
|
|
import type { ProxyMessage, TextMessage } from "../../../types";
|
|
|
|
export async function POST(request: NextRequest) {
|
|
if (!process.env.ABLY_API_KEY) {
|
|
return NextResponse.json(
|
|
{ error: "Missing ABLY_API_KEY environment variable" },
|
|
{ status: 500 },
|
|
);
|
|
}
|
|
|
|
const body = (await request.json()) as ProxyMessage;
|
|
const client = new Ably.Rest(process.env.ABLY_API_KEY);
|
|
const channel = client.channels.get("some-channel-name");
|
|
|
|
const message: TextMessage = {
|
|
text: `Server sent a message on behalf of ${body.sender}`,
|
|
};
|
|
await channel.publish("test-message", message);
|
|
|
|
return NextResponse.json({ ok: true });
|
|
}
|