mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Owen Pearson
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>
92 lines
1.1 KiB
CSS
92 lines
1.1 KiB
CSS
body {
|
|
margin: 0;
|
|
font-family:
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
Segoe UI,
|
|
Roboto,
|
|
Oxygen,
|
|
Ubuntu,
|
|
Cantarell,
|
|
Fira Sans,
|
|
Droid Sans,
|
|
Helvetica Neue,
|
|
sans-serif;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
padding: 0;
|
|
list-style: none;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
button {
|
|
margin-right: 1rem;
|
|
border-radius: 0.4rem;
|
|
border: 0;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
padding: 10px 15px;
|
|
font-size: large;
|
|
color: white;
|
|
background-color: #ff5416;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #ff2739;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-grow: 0;
|
|
column-gap: 1em;
|
|
align-items: flex-start;
|
|
padding: 2em 0 0;
|
|
border-top: 1px solid #eaeaea;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.footer a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.logo {
|
|
width: 100px;
|
|
height: auto;
|
|
margin-right: 1rem;
|
|
}
|