Live example at: https://ably-next-headlines.vercel.app/
Step by step guide at: https://ably.com/blog/next-js-vercel-link-sharing-serverless-websockets
This is a demo app using NextJS and Ably with the Ably npm module.
It demonstrates the use of:
- Pub/sub messaging
- Channel presence
- Channel rewind/History
- OpenGraph
It shows how to use Ably's React Hooks in the context of a Next.js application, with server-side rendering.
The project uses the following components:
- NextJS, for highly optimized static web sites
- Vercel, for deployment
- Ably, for realtime messaging at scale in React-based applications.
- Sign up or log in to ably.com, and create a new app and copy the root API key. This is your server API key.
- Create another API key with the Subscribe abd Presence capabilities only. This is your client API key.
- Run
npm install.
To run this project locally, fork this repo and add an .env file containing your Ably API keys and local path:
# This will change after deployment
NEXT_PUBLIC_HOSTNAME=http://localhost:3000
# Server key must have Publish and History permissions - use app's Root key
ABLY_SERVER_API_KEY=UGCYxQ.211oIA:VgSya3hCMo....
# Client key should have Subscribe and Presence permissions only
ABLY_CLIENT_API_KEY=UGCYxQ.uhSg9Q:A6Ftr7F0HTg....Refer to the tutorial blog post for full instructions on deployment to Vercel.
Want to help contributing to this project? Have a look at our contributing guide!
