Step by step guide at: https://ably.com/blog/next-js-netlify-ably-chat
Live demo here: https://nextjs-ably-chat-app.netlify.app/
This is a demo chat application with Next.js using Ably as the messaging platform.
It demonstrates the use of:
- Pub/sub messaging with Ably Chat
- Ably Chat's React Hooks
- Token authentication with Ably
The project uses the following components:
-
Next.js is a React framework used to build static web applications with server side rendering, serverless functions and seamless hosting. It's a framework that takes the React knowledge you already have, and puts some structure and conventions in place.
-
Ably is realtime, pub/sub messaging platform with a suite of integrated services to deliver complete realtime functionality directly to end-users.
-
Netlify is a hosting platform that provides continuous deployment, serverless functions, and a global CDN for modern web projects.
-
React is a JavaScript library for building user interfaces with encapsulated components that manage their own state.
-
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
The UI of the app we'll build with this walkthrough
We'll build a realtime chat app that runs in the browser. It will be built upon the Next.js create-next-app template, it will contain a React component which will use Ably to send and receive messages. We'll also write a serverless function which will be used to authenticate the client with Ably.
In order to build and deploy this app, you will need:
- An Ably account for sending messages: Create an account with Ably for free.
- A Netlify Account for hosting on production: Create an account with Netlify for free.
- Node 20 or greater: Install Node.
You'll also need an API key from Ably to authenticate with the Ably Service. To get an API key, once you have created an Ably account:
- Visit your app dashboard and click on "Create new app".
- Give the new app a name.
- Copy the Private API key once the app has been created. Keep it safe, this is how you will authenticate with the Ably service.
- To run this project locally, fork this repo and create a file called
.envin the root of the project containing your Ably API key:
ABLY_API_KEY=your-ably-api-key:goes-here- Run
npm install. - Run
npm run netlify:devto start the Netlify development server.
The Netlify development server will spin up and you'll see a demo chat application.
Note: You can also use
npm run devto run just the Next.js development server without Netlify functions, but for the full experience with serverless functions, usenpm run netlify:dev.
This project uses TypeScript for type safety. Here are some useful commands for TypeScript development:
npm run type-check: Run TypeScript's type checker without emitting filesnpm run dev: The Next.js development server automatically type-checks your code as you develop
When creating new components or functions, use the .tsx extension for React components and .ts for plain TypeScript files. The project is configured with a tsconfig.json file that provides sensible defaults for Next.js TypeScript projects.
We're using Netlify as our development server and build pipeline.
Netlify is a powerful platform for building, deploying, and managing modern web projects. It provides continuous deployment, serverless functions, and a global CDN. -- The Netlify documentation
In order to deploy your new chat app to Netlify you'll need to:
- Create a GitHub account (if you don't already have one)
- Push your app to a GitHub repository
- Create a Netlify account
- Create a new Netlify site and import your app from your GitHub repository. (This will require you to authorize Netlify to use your GitHub account)
- Add your
ABLY_API_KEYas an environment variable in the Netlify site settings - Watch your app deploy
- Visit the newly created URL in your browser!
