Add a claps button (like medium) to any page for your Next.js apps.

Nothing to maintain, it is completely serverless 💯

Check out the demo.

Create a free Redis database at Upstash Console

We will use Upstash Redis to keep the data as well as messaging (Redis pub/sub).

Copy the .env.local.example file to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN can be found at the database details page in Upstash Console.

yarn add @upstash/claps

// pages/_app.js
import "@upstash/claps/style.css";

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// pages/example.js
import Claps from "@upstash/claps";

export default function Example() {
  return (
    <div>
        <Claps fixed="left">
    </div>
  )
}

The options can be passed as React props

Url of the page is being used as the key/identity to keep the claps count. You can override this giving the key attribute.

// pages/api/claps.js
import createClapsAPI from "@upstash/claps/api";

const ClapsAPI = createClapsAPI({
 // maxClaps: 10
});
export default ClapsAPI;

Use Upstash Discord channel to get support.