Adding a View Counter to your Next.js Blog

Inspired by Lee's blog, the author describes how to implement a page view counter using Next.js 13 and Upstash Redis, instead of a traditional MySQL database. The goal is to track and display the number of views on each page, achieved by using Redis commands such as SET with NX and EX options to deduplicate and prevent multiple increments from a single user within a given timeframe, and INCR to increment the view count. Setting up the Redis database on Upstash is straightforward, offering 10k requests per day for free. The implementation involves creating an API route to handle view counting and a client component to trigger the counter increment upon page load. Additionally, the author provides a method for displaying the view count using the GET command and suggests revalidating the page every 60 seconds to ensure up-to-date information. The complete code is available on GitHub, and further engagement is encouraged through Twitter or Discord for those interested in page view analytics.

Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.