Refactor: Add wrapper components for dynamic imports and update deployment documentation

splindsay-92 · splindsay-92 · commit 107065669902 · 2026-02-16T09:39:16.000Z
- Introduce wrapper components (`*Wrapper`) to simplify dynamic imports for client-side rendering.
- Update README to include Netlify deployment instructions alongside Vercel.
- Add `netlify.toml` for Netlify deployment support.
- Install `@netlify/plugin-nextjs` as a dev dependency for Netlify compatibility.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+ABLY_API_KEY=your_ably_api_key
+DEFAULT_CLIENT_ID=some_client_id
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ The project uses the following components:
 ### Prerequisites
 
 1. [Sign up](https://ably.com/signup?utm_source=github&utm_medium=github-repo&utm_campaign=GLB-2211-ably-nextjs-fundamentals-kit&utm_content=ably-nextjs-fundamentals-kit&src=GLB-2211-ably-nextjs-fundamentals-kit-github-repo) or [log in](https://ably.com/login?utm_source=github&utm_medium=github-repo&utm_campaign=GLB-2211-ably-nextjs-fundamentals-kit&utm_content=ably-nextjs-fundamentals-kit&src=GLB-2211-ably-nextjs-fundamentals-kit-github-repo) to ably.com, and [create a new app and copy the API key](https://faqs.ably.com/setting-up-and-managing-api-keys?utm_source=github&utm_medium=github-repo&utm_campaign=GLB-2211-ably-nextjs-fundamentals-kit&utm_content=ably-nextjs-fundamentals-kit&src=GLB-2211-ably-nextjs-fundamentals-kit-github-repo).
-2. To deploy to [Vercel](https://vercel.com), create a Vercel account.
+2. To deploy, create an account on your chosen platform: [Vercel](https://vercel.com) or [Netlify](https://netlify.com).
 
 ### Configure the app
 
@@ -37,16 +37,33 @@ echo "ABLY_API_KEY={YOUR_ABLY_API_KEY_HERE}">.env
 
 ```bash
 npm run dev
-# or
-yarn dev
 ```
 
-## Deploy on Vercel
+## Deploying
+
+This app can be deployed to either Vercel or Netlify. The codebase is identical for both — only the platform-specific configuration files differ (`vercel.json` for Vercel, `netlify.toml` for Netlify).
+
+### Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fably-labs%2Fably-nextjs-fundamentals-kit&env=ABLY_API_KEY)
 
+1. Click the **Deploy with Vercel** button above.
+2. Set the `ABLY_API_KEY` environment variable when prompted.
+3. Click **Deploy**.
+
+### Deploy on Netlify
+
+You can deploy this app to [Netlify](https://www.netlify.com) using the button below. Netlify uses the `@netlify/plugin-nextjs` plugin (included in `devDependencies`) to handle Next.js server-side features such as API routes.
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ably-labs/ably-nextjs-fundamentals-kit)
+
+1. Click the **Deploy to Netlify** button above.
+2. Connect your GitHub account and authorize Netlify to clone the repo.
+3. Set the `ABLY_API_KEY` environment variable in **Site configuration > Environment variables**.
+4. Trigger a deploy.
+
 ## Contributing
 
 Want to help contributing to this project? Have a look at our [contributing guide](CONTRIBUTING.md)!
@@ -59,4 +76,4 @@ Want to help contributing to this project? Have a look at our [contributing guid
 - [Visit the Ably website](https://ably.com?utm_source=github&utm_medium=github-repo&utm_campaign=GLB-2211-ably-nextjs-fundamentals-kit&utm_content=ably-nextjs-fundamentals-kit&src=GLB-2211-ably-nextjs-fundamentals-kit-github-repo)
 
 ---
-[![Ably logo](https://static.ably.dev/badge-black.svg?ably-nextjs-fundamentals-kit-github-repo)](https://ably.com?utm_source=github&utm_medium=github-repo&utm_campaign=GLB-2211-ably-nextjs-fundamentals-kit&utm_content=ably-nextjs-fundamentals-kit&src=GLB-2211-ably-nextjs-fundamentals-kit-github-repo)
+[![Ably logo](https://static.ably.dev/badge-black.svg?ably-nextjs-fundamentals-kit-github-repo)](https://ably.com?utm_source=github&utm_medium=github-repo&utm_campaign=GLB-2211-ably-nextjs-fundamentals-kit&utm_content=ably-nextjs-fundamentals-kit&src=GLB-2211-ably-nextjs-fundamentals-kit-github-repo)
diff --git a/app/authentication/authentication-wrapper.tsx b/app/authentication/authentication-wrapper.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const AuthenticationClient = dynamic(
+  () => import('./authentication-client.tsx'),
+  { ssr: false }
+)
+
+export default function AuthenticationWrapper() {
+  return <AuthenticationClient />
+}
diff --git a/app/authentication/page.tsx b/app/authentication/page.tsx
@@ -2,16 +2,11 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
-'use client'
 
 import React from "react";
 import "../global.css";
-import dynamic from 'next/dynamic';
 import Sidebar from "../../components/Sidebar.tsx";
-
-const AuthenticationClient = dynamic(() => import('./authentication-client.tsx'), {
-  ssr: false,
-})
+import AuthenticationWrapper from './authentication-wrapper.tsx';
 
 const Authentication = () => {
 
@@ -21,7 +16,7 @@ const Authentication = () => {
       <>
         <Sidebar pageId={pageId} />
         <div className="flex flex-col grow pt-12 pr-12 pb-12 pl-12 rounded-2xl border-slate-100 border-t border-b border-l border-r border-solid border h-[864px] bg-slate-50">
-          <AuthenticationClient />
+          <AuthenticationWrapper />
         </div>
       </>
   )
diff --git a/app/history/history-wrapper.tsx b/app/history/history-wrapper.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const HistoryClient = dynamic(
+  () => import('./history-client.tsx'),
+  { ssr: false }
+)
+
+export default function HistoryWrapper() {
+  return <HistoryClient />
+}
diff --git a/app/history/page.tsx b/app/history/page.tsx
@@ -2,18 +2,11 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
-'use client'
 
 import React from "react";
 import "../global.css";
-import dynamic from 'next/dynamic';
-import MenuFooter from "../../components/FooterItem.tsx";
-import MenuItem from "../../components/MenuItem.tsx";
 import Sidebar from "../../components/Sidebar.tsx";
-
-const HistoryClient = dynamic(() => import('./history-client.tsx'), {
-  ssr: false,
-})
+import HistoryWrapper from './history-wrapper.tsx';
 
 const History = () => {
 
@@ -23,7 +16,7 @@ const History = () => {
       <>
         <Sidebar pageId={pageId} />
         <div className="flex flex-col grow gap-6 pt-12 pr-12 pb-12 pl-12 rounded-2xl border-slate-100 border-t border-b border-l border-r border-solid border h-[864px] bg-slate-50">
-          <HistoryClient />
+          <HistoryWrapper />
         </div>
       </>
   )
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import './global.css'
 import type { Metadata } from 'next'
+import React from "react";
 
 export const metadata: Metadata = {
   title: 'Ably & Next.js fundamentals kit',
diff --git a/app/presence/page.tsx b/app/presence/page.tsx
@@ -2,18 +2,11 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
-'use client'
 
 import React from "react";
 import "../global.css";
-import dynamic from 'next/dynamic';
-import MenuFooter from "../../components/FooterItem.tsx";
-import MenuItem from "../../components/MenuItem.tsx";
 import Sidebar from "../../components/Sidebar.tsx";
-
-const PresenceClient = dynamic(() => import('./presence-client.tsx'), {
-  ssr: false,
-})
+import PresenceWrapper from './presence-wrapper.tsx';
 
 const Presence = () => {
 
@@ -23,7 +16,7 @@ const Presence = () => {
       <>
         <Sidebar pageId={pageId} />
         <div className="flex flex-col grow gap-6 pt-12 pr-12 pb-12 pl-12 rounded-2xl border-slate-100 border-t border-b border-l border-r border-solid border h-[864px] bg-slate-50">
-          <PresenceClient />
+          <PresenceWrapper />
         </div>
       </>
   )
diff --git a/app/presence/presence-wrapper.tsx b/app/presence/presence-wrapper.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const PresenceClient = dynamic(
+  () => import('./presence-client.tsx'),
+  { ssr: false }
+)
+
+export default function PresenceWrapper() {
+  return <PresenceClient />
+}
diff --git a/app/pub-sub/page.tsx b/app/pub-sub/page.tsx
@@ -2,16 +2,11 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
-'use client'
 
 import React from "react";
 import "../global.css";
-import dynamic from 'next/dynamic';
 import Sidebar from "../../components/Sidebar.tsx";
-
-const PubSubClient = dynamic(() => import('./pubsub-client.tsx'), {
-  ssr: false,
-})
+import PubSubWrapper from './pubsub-wrapper.tsx';
 
 const PubSub = () => {
 
@@ -21,7 +16,7 @@ const PubSub = () => {
       <>
         <Sidebar pageId={pageId} />
         <div className="flex flex-col grow gap-6 pt-12 pr-12 pb-12 pl-12 rounded-2xl border-slate-100 border-t border-b border-l border-r border-solid border h-[864px] bg-slate-50">
-          <PubSubClient />
+          <PubSubWrapper />
         </div>
       </>
   )
diff --git a/app/pub-sub/pubsub-wrapper.tsx b/app/pub-sub/pubsub-wrapper.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const PubSubClient = dynamic(
+  () => import('./pubsub-client.tsx'),
+  { ssr: false }
+)
+
+export default function PubSubWrapper() {
+  return <PubSubClient />
+}
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+  command = "npm run build"
+  publish = ".next"
+
+[[plugins]]
+  package = "@netlify/plugin-nextjs"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "typescript": "5.2.2"
   },
   "devDependencies": {
+    "@netlify/plugin-nextjs": "^5.11.2",
     "@types/jsonwebtoken": "^9.0.10",
     "autoprefixer": "^10.4.15",
     "eslint-config-next": "^16.1.6",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+ABLY_API_KEY=your_ably_api_key`
	`2`	`+DEFAULT_CLIENT_ID=some_client_id`