fix: replace outdated Next.js integration patterns by rainbowFi · Pull Request #15 · ably-labs/NextJS-chat-app

rainbowFi · 2026-04-16T09:37:54Z

Summary

Aim is to update all Vercel-related demos, blogs and tutorials to match the current Vercel recommendations and versions.

Moved demo to latest Chat SDK

Update @ably/chat from 0.6.0 to 1.3.1 and ably from 2.8.0 to 2.21.0

Replace outdated Next.js patterns

Remove dynamic + ssr: false from app/page.js and replace with a direct import
Move Ably client creation into useEffect + useState in components/Chat.jsx to prevent new connections on every render
Add cleanup function that closes the Ably realtime connection on unmount
These are the same fixes applied in ably/ably-nextjs-fundamentals-kit#11

Fix runtime warnings

Migrate from next/head to the Next.js Metadata API

General housekeeping

Update README to reflect Ably Chat SDK usage, correct Node version, and fix outdated descriptions

References: AIT-540

Test plan

Run npm run build — confirms no compilation errors
Run npm run dev with a valid ABLY_API_KEY and verify the chat demo works
Verify no dynamic or ssr: false references remain in the codebase
Verify sending multiple messages works without errors
Verify no next/head runtime warning

🤖 Generated with Claude Code

Remove dynamic import with ssr: false from page.js (Pattern A) and move Ably client creation from component body into useEffect (Pattern C). This prevents unnecessary server-side connection attempts and stops new WebSocket connections being created on every render. References: AIT-540, ably/ably-nextjs-fundamentals-kit#11 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel · 2026-04-16T09:38:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
next-js-chat-app	Ready	Preview, Comment	Apr 21, 2026 8:51am

The demo was migrated from Ably Pub/Sub to the Ably Chat SDK but the README still described the old approach. This removes the misleading Pub/Sub migration banner, updates the description and tech stack to reference the Chat SDK and its React hooks, corrects the Node version requirement to 18+, updates the architecture description to reference Route Handlers instead of serverless functions, and removes the "add message history" suggestion since the app already loads the last 50 messages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

History is still not part of the demo, keep the section as-is. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Upgrades @ably/chat from 0.6.0 (pre-release) to 1.3.1 and ably from 2.8.0 to 2.21.0 (required peer dependency). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- useMessages() returns `sendMessage` instead of `send` - ChatRoomProvider takes `name` prop instead of `id` - Remove invalid `history` room option (no longer part of RoomOptions) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Message.isSameAs() and Message.after() were removed in Chat SDK v1.x. Use serial string comparison for deduplication instead. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Move title and favicon from next/head in page.js to the metadata export in layout.js, which is the correct approach for the App Router. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

splindsay-92

Some minor comments, but looks good! Ping me and I'll approve the PR when you're ready :)

splindsay-92 · 2026-04-20T08:46:29Z

-        if (index === -1) {
-          newMessages.push(newMessage);
-        } else {
-          newMessages.splice(index, 0, newMessage);


This code ensured the message is placed in the correct order. While messages publish in region are guaranteed to be in order, cross region publishes might not be. Since this just a demo, it's probably enough to call .sort() on the new array each time (in production we do more complex binary search to find the correct insert position in an efficient way and always keep the array ordered)

Overenthusiastic rewrite from Claude when handling a changed Chat SDK API, I've reworked.

splindsay-92 · 2026-04-20T08:55:07Z

 - **An Ably account** for sending messages: [Create an account with Ably for free](https://ably.com/signup).
 - **A Vercel Account** for hosting on production: [Create an account with Vercel for free](https://vercel.com/signup).
- **Node 16** or greater: [Install Node](https://nodejs.org/en/).
+- **Node 18** or greater: [Install Node](https://nodejs.org/en/).


Can we bump this to Node 20 please? Chat-js generally aims for V20 support onwards now :)

Done, I've also added it to package.json to make sure it's enforced

Reimplement the sorted insertion logic that was removed in 050a702 using serial string comparison, so messages arriving out of order during reconnection are placed in the correct chronological position. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add .nvmrc, engines field in package.json, and update README prerequisites. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Sort messages by serial using comparison operators as shown in the Chat SDK documentation, rather than findIndex/splice insertion. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace manual splice-based insertion with a simpler sort approach, matching the pattern used in ably-labs/NextJS-chat-app#15. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

splindsay-92

LGTM

rainbowFi mentioned this pull request Apr 16, 2026

fix: enable multi-user chat with unique client IDs and message styling #16

Merged

4 tasks

vercel Bot deployed to Preview April 16, 2026 16:54 View deployment

docs: restore message history section in README

5837248

History is still not part of the demo, keep the section as-is. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 16, 2026 16:58 View deployment

style: fix prettier formatting in Chat.jsx

15ea72c

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 17, 2026 13:54 View deployment

deps: update ably and @ably/chat to latest stable versions

07e8112

Upgrades @ably/chat from 0.6.0 (pre-release) to 1.3.1 and ably from 2.8.0 to 2.21.0 (required peer dependency). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 17, 2026 14:10 View deployment

vercel Bot deployed to Preview April 17, 2026 14:14 View deployment

fix: replace removed isSameAs/after methods with serial comparison

050a702

Message.isSameAs() and Message.after() were removed in Chat SDK v1.x. Use serial string comparison for deduplication instead. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 17, 2026 14:15 View deployment

fix: migrate from next/head to Metadata API

80f05a7

Move title and favicon from next/head in page.js to the metadata export in layout.js, which is the correct approach for the App Router. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 17, 2026 14:19 View deployment

splindsay-92 reviewed Apr 20, 2026

View reviewed changes

rainbowFi and others added 2 commits April 21, 2026 09:34

chore: require Node 20

559c5d6

Add .nvmrc, engines field in package.json, and update README prerequisites. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 21, 2026 08:35 View deployment

fix: use SDK-recommended sort pattern for message ordering

f986d9c

Sort messages by serial using comparison operators as shown in the Chat SDK documentation, rather than findIndex/splice insertion. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 21, 2026 08:51 View deployment

rainbowFi requested a review from splindsay-92 April 21, 2026 09:20

splindsay-92 approved these changes Apr 21, 2026

View reviewed changes

rainbowFi merged commit a706b8b into main Apr 22, 2026
3 checks passed

rainbowFi deleted the fix/nextjs-patterns-ait-540 branch April 22, 2026 07:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: replace outdated Next.js integration patterns#15

fix: replace outdated Next.js integration patterns#15
rainbowFi merged 11 commits into
mainfrom
fix/nextjs-patterns-ait-540

rainbowFi commented Apr 16, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

splindsay-92 left a comment

Uh oh!

splindsay-92 Apr 20, 2026

Uh oh!

rainbowFi Apr 21, 2026

Uh oh!

splindsay-92 Apr 20, 2026

Uh oh!

rainbowFi Apr 21, 2026

Uh oh!

splindsay-92 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

rainbowFi commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

vercel Bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

splindsay-92 left a comment

Choose a reason for hiding this comment

Uh oh!

splindsay-92 Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

rainbowFi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

splindsay-92 Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

rainbowFi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

splindsay-92 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rainbowFi commented Apr 16, 2026 •

edited

Loading

vercel Bot commented Apr 16, 2026 •

edited

Loading