Building a Serverless Realtime Chat application with Pusher and NextJS

Why Pusher?

Realtime Chat Application Demo

Prerequisites

  • Local installation of Node.js
  • Local installation of Yarn
  • Basic knowledge of React and React hooks
  • Basic knowledge of Node.js

Brief overview of Pusher’s APIs

Setting up Pusher

Setting up our server

yarn create next-app --example api-routes-cors pusher-chat-demo
yarn add pusher

Setting up the Frontend

yarn add pusher-js axios
NEXT_PUBLIC_KEY= "YOUR_PUBLIC_KEY"

_app.js

pages/index.js

Chat.js

Bonus

--

--

--

Growth at Moni(YC W22) | Adebola.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript ES2021 (ES12) Is Set to Make Our Lives Even Easier

Create a Notes App with React and JavaScript

How to Check if an Object Value Exists within a JavaScript Object Array and if not, Add a New…

Vuetify — Progress Display

Top React Hooks — Idleness, Geolocation, and Hashes

AngularJS vs. Node.Js- All You Need to Know about Top Frameworks

BootstrapVue — Text Area Customization and Time Picker

Switch guard in Typescript —  How to make sure all possible cases are handled

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adebola Adeniran

Adebola Adeniran

Growth at Moni(YC W22) | Adebola.dev

More from Medium

How to do Canary Release / Progressive Delivery with ConfigCat

Send custom notification on slack in 4 minutes

How Merge Unblocked 10x in Sales for Assembly — Merge

Text that reads “How Merge Unblocked 10x in Sales for Assembly”

DockerFile for SvelteKit Application