examples/with-ably: modernize to App Router + Ably v2

[rainbowFi]

Review PR (fork-internal)

This PR is open against rainbowFi/next.js:canary purely so the diff can be reviewed in the GitHub UI before a real PR is opened against vercel/next.js. Do not merge — the changes should go upstream.

Summary

Modernizes examples/with-ably to match the patterns in ably/ably-nextjs-fundamentals-kit (reference PR #11, merged).

Tracks Ably ticket AIT-540.

What changed

Routing

• Deleted pages/ (Pages Router)
• Added app/ (App Router): layout.tsx, page.tsx, home-client.tsx, ably-client-provider.tsx, api/createTokenRequest/route.ts, api/send-message/route.ts

Dependencies

• Dropped @ably-labs/react-hooks ^2.0.4 (deprecated)
• Bumped ably ^1.2.22 → ^2.21.0 (hooks now bundled in ably/react)
• Bumped react / react-dom / @types/* / typescript to current stable

Ably client lifecycle

• Ably.Realtime is created inside a useEffect in app/ably-client-provider.tsx, so no connection is attempted during SSR
• clientId is generated once in component state via useState(() => ...) instead of at module load
• Cleanup on unmount closes the client
• Added a useAblyReady() context so children can render a placeholder until the client is ready (mirrors the reference repo pattern)

API routes

• Both handlers switched from Ably.Realtime to Ably.Rest. Short-lived server work doesn't need a persistent WebSocket connection.
• Added an ABLY_API_KEY missing-env guard (the original would crash unhelpfully).
• Explicit await on channel.publish in send-message.

Other

• Removed API_ROOT env var — the browser is same-origin and authUrl is relative, so the prefix was never needed
• Merged styles/Home.module.css into styles/globals.css
• Rewrote README.md to document the App Router + ably/react pattern
• Kept the demo's feature set 1:1 (send client-side message, update presence status, send server-side message)

Testing

• pnpm build — clean, 681ms Turbopack compile, no TS errors
• pnpm dev — HTTP 200 on /, renders Connecting to Ably... placeholder during client init (expected — AblyClientProvider is client-only)
• /api/createTokenRequest?clientId=test-123 — returns a valid signed token request
• .env.local created with ABLY_API_KEY, confirmed gitignored

Known quirks preserved from original

• Channel-name mismatch: the original demo uses some-channel-name for messages but your-channel-name for presence, so presence never observes chat participants. Kept 1:1 to stay within scope. Worth fixing in a follow-up commit before the upstream PR.
• authMethod: 'POST' from the reference repo was not adopted — kept the original example's GET default (both work; smaller diff).

For the upstream PR (when ready)

• Include <!-- NEXT_JS_LLM_PR --> at the bottom of the PR description (Next.js repo convention)
• Leave in draft mode; don't mark ready for review
• No Claude co-author footer on the commit (already handled)