Here is how to add a view counter and minute read into your Next.js 14 Blog. This was inspired by [Andreas' blog post](https://upstash.com/blog/nextjs13-approuter-view-counter), which was inspired by [Lee's blog](https://leerob.io/blog). However, it was published on April 3rd, 2023 and there have been a few updates since then. I wanted to share how I was able to get it to work with Next.js 14. And also include how to add minute read. ## Prerequisites - An [Upstash](https://upstash.com/) account - A [Next.js 14](https://nextjs.org/) project (will have an example one if you don't have one) ## Setting up our Next.js 14 project You can find the starter and final code [here](https://github.com/hqasmei/nextjs14-blog).

If you already have a repository that you are trying to add the view counter to, you can add the package below with your desired package manager. ```bash bun add @upstash/redis ``` ## Setting up Upstash Redis Go to [Upstash](https://upstash.com/), login or create an account. In the dashboard make sure you are on the Redis tab, and click Create database. {`Example

Enter in the Name, select the Type and Region and click Create. {`Example

When the database is finished being created, scroll down in the project dashboard to the REST API section. Click on .env and add UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN into the .env file in the project. {`Example

## Folder Structure ```bash title="Terminal" ├── src | ├── app | | ├── api | | | ├── increment | | | | | ├── route.ts | | ├── posts | | | ├── [slug] | | | | | ├── page.tsx | | | | | ├── view.tsx | | | | ├── page.tsx | | | | ├── posts.tsx | | | ├── favicon.ico | | | ├── layout.tsx | | | ├── page.tsx ... ``` ## View Counter There are two things we want to do, (1) see how many views a blog post has and (2) increment the view each time someone visits the page. ### Viewing Here is a high level diagram drawn with [eraser.io](https://eraser.io/). This shows the src/app/posts/page.tsx and how it fetches the views for each post. {`Fetch

And here is the code. ```tsx showLineNumbers import React from 'react'; import { getPosts } from '@/lib/posts'; import { Redis } from '@upstash/redis'; import Posts from './posts'; const redis = Redis.fromEnv(); export const revalidate = 0; export const metadata = { title: 'Posts', description: '', }; export default async function PostsPage() { let allPosts = getPosts(); const views = ( await redis.mget( ...allPosts.map((p) => ['pageviews', 'posts', p.slug].join(':')), ) ).reduce( (acc, v, i) => { acc[allPosts[i].slug] = v ?? 0; return acc; }, {} as Record, ); return ; } ``` We are going through each post in allPosts, fetching the value from the Upstash Redis database and inputting it into our Posts component. The same method is used here. But since we have the slug for the post it makes it simplier to get the value. ```tsx showLineNumbers {16} import { cache, Suspense } from 'react'; import type { Metadata } from 'next'; import Link from 'next/link'; import { notFound } from 'next/navigation'; import MaxWidthWrapper from '@/components/max-width-wrapper'; import { CustomMDX } from '@/components/mdx'; import { getPosts } from '@/lib/posts'; import { calculateReadingTime, reformatDate } from '@/lib/utils'; import { Redis } from '@upstash/redis'; import { ArrowLeft } from 'lucide-react'; import { ReportView } from './view'; const redis = Redis.fromEnv(); export const revalidate = 0; export default async function PostsPage({ params }: { params: any }) { const post = getPosts().find((post) => post.slug === params.slug); if (!post) { notFound(); } const views = (await redis.get(['pageviews', 'posts', params.slug].join(':'))) ?? 0; return (

Back

{post.metadata.title}

{reformatDate(post.metadata.publishedAt)} {Intl.NumberFormat('en-US', { notation: 'compact' }).format( views, )}{' '} {' views'} {calculateReadingTime(post.content)} {' min read'}

); } ``` ### Incrementing Here is a high level diagram drawn for incrementing. The only time we want to increment is when we visit the blog post. {`Increment

## Add Minute Read For minutes read, since we have the content of the mdx, we can pass it into a function and use a formula to determine how many minutes it would take to read. ```ts showLineNumbers export function calculateReadingTime(mdxContent: any) { // Define the average reading speed (words per minute) const wordsPerMinute = 200; // Strip MDX/HTML tags and count the words const text = mdxContent.replace(/<\/?[^>]+(>|$)/g, ''); const wordCount = text .split(/\s+/) .filter((word: any) => word.length > 0).length; // Calculate reading time const readingTime = Math.ceil(wordCount / wordsPerMinute); return readingTime; } ``` ## Conclusion Congratulations! You just have added a view counter and a minute read to you Next.js blog.