mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08: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 <fiona.corden@ably.com>
24 lines
692 B
TypeScript
24 lines
692 B
TypeScript
import * as Ably from "ably";
|
|
import { type NextRequest, NextResponse } from "next/server";
|
|
|
|
export async function GET(request: NextRequest) {
|
|
if (!process.env.ABLY_API_KEY) {
|
|
return NextResponse.json(
|
|
{ error: "Missing ABLY_API_KEY environment variable" },
|
|
{ status: 500 },
|
|
);
|
|
}
|
|
|
|
const clientId = request.nextUrl.searchParams.get("clientId");
|
|
if (!clientId) {
|
|
return NextResponse.json(
|
|
{ error: "Missing clientId query parameter" },
|
|
{ status: 400 },
|
|
);
|
|
}
|
|
|
|
const client = new Ably.Rest(process.env.ABLY_API_KEY);
|
|
const tokenRequestData = await client.auth.createTokenRequest({ clientId });
|
|
return NextResponse.json(tokenRequestData);
|
|
}
|