Ably-js v2 migration

app/api/route.js

@@ -1,9 +1,15 @@
-import Ably from 'ably/promises';
+import Ably from 'ably';
 
-export async function GET(request) {
-  const client = new Ably.Realtime(process.env.ABLY_API_KEY);
-  const tokenRequestData = await client.auth.createTokenRequest({ clientId: 'ably-nextjs-demo' });
+// ensure Vercel doesn't cache the result of this route,
+// as otherwise the token request data will eventually become outdated
+// and we won't be able to authenticate on client side
+export const revalidate = 0;
 
+export async function GET(request) {
+  const client = new Ably.Rest(process.env.ABLY_API_KEY);
+  const tokenRequestData = await client.auth.createTokenRequest({
+    clientId: 'ably-nextjs-demo',
+  });
   console.log(`Request: ${JSON.stringify(tokenRequestData)}`);
   return Response.json(tokenRequestData);
 }

app/layout.js

@@ -1,4 +1,4 @@
-import './global.css';
+import './globals.css';
 
 export const metadata = {
   title: 'Next.js',

components/Chat.jsx

@@ -1,15 +1,17 @@
 'use client';
 
 import * as Ably from 'ably';
-import { AblyProvider } from 'ably/react';
+import { AblyProvider, ChannelProvider } from 'ably/react';
 import ChatBox from './ChatBox.jsx';
 
 export default function Chat() {
-  const client = Ably.Realtime.Promise({ authUrl: '/api' });
+  const client = new Ably.Realtime({ authUrl: '/api' });
 
   return (
     <AblyProvider client={client}>
-      <ChatBox />
+      <ChannelProvider channelName="chat-demo">
+        <ChatBox />
+      </ChannelProvider>
     </AblyProvider>
   );
 }

components/ChatBox.jsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useEffect, useState } from 'react';
 import { useChannel } from 'ably/react';
 import styles from './ChatBox.module.css';

next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ['ably'],
+  },
+};
+
+export default nextConfig;

package.json

@@ -12,8 +12,8 @@
     "format:check": "prettier --check --ignore-path .gitignore app components"
   },
   "dependencies": {
-    "ably": "^1.2.44",
-    "next": "^13.4.19",
+    "ably": "^2.0.4",
+    "next": "^14.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },