If you're searching for a simple and effective method to incorporate real-time page views into your Next.js website, you've come across the perfect tutorial on this topic. In this article, I will guide you through the process of integrating real-time page views into your Next.js website using Turso and Drizzle ORM. Turso: A Game-Changing SQLite Edge Database Let me introduce you to , the groundbreaking SQLite edge database that will revolutionize your website. Turso is built on the robust libSQL framework and offers an astonishing free plan that lasts indefinitely. With this plan, you'll enjoy a generous 8 GB of total storage and the ability to create up to 3 databases across 3 different locations. Prepare to have your expectations completely exceeded! Turso Drizzle ORM: The Cutting-Edge Object-Relational Mapping Library is an advanced object-relational mapping library designed specifically for Node.js and TypeScript applications. This powerhouse provides comprehensive support for multiple databases, migrations, and query building. It's like having a turbocharged engine powering your website! Drizzle ORM Setup Turso database Install the Turso CLI (For more options ): Click here brew install chiselstrike/tap/turso Sign up to Turso: turso auth signup Create a new database turso db create [db-name] Get the URL of your database (Starts with ): libsql:// turso db show [db-name] Access your database shell: turso db shell [db-name] Create a new table for : views CREATE TABLE IF NOT EXISTS views (
    slug TEXT PRIMARY KEY,
    title TEXT,
    count INTEGER
); Create an token auth turso db tokens create [db-name] -e none Now inside file, add the following: .env DATABASE_URL=libsql://[db-url]
DATABASE_AUTH_TOKEN=[auth-token] Connect Next.js to Turso In order to connect our site to the database, we need to use Drizzle ORM. All we have to do is install couple of packages and set them up. Install Drizzle ORM and libSQL client: npm i drizzle-orm @libsql/client Create a file to initialize your Turso client lib/turso.ts import { createClient } from '@libsql/client'
import { drizzle } from 'drizzle-orm/libsql'
import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'

const connection = createClient({
	url: process.env.DATABASE_URL || '',
	authToken: process.env.DATABASE_AUTH_TOKEN,
})

export const db = drizzle(connection)

export const viewsTable = sqliteTable('views', {
	slug: text('slug').primaryKey(),
	count: integer('count').notNull().default(0),
}) Now we create and use it to increment and fetch page views app/api/views/[slug]/route.ts import { eq } from 'drizzle-orm'
import { type NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

import { db, viewsTable } from '@/lib/turso'

interface Options {
	params: {
		slug: string
	}
}

export const GET = async (request: NextRequest, { params }: Options) => {
	const slug = z.string().parse(params.slug)

	const data = await db.select().from(viewsTable).where(eq(viewsTable.slug, slug)).all()

	const count = !data.length ? 0 : Number(data[0].count)

	return NextResponse.json({ count })
}

export const POST = async (request: NextRequest, { params }: Options) => {
	const slug = params.slug

	const data = await db.select().from(viewsTable).where(eq(viewsTable.slug, slug)).all()

	const count = !data.length ? 0 : Number(data[0].count)

	await db
    .insert(viewsTable)
    .values({
      slug,
      count: 1,
    })
    .onConflictDoUpdate({
      target: viewsTable.slug,
      set: {
        count: count + 1,
      },
    })
    .returning()
    .get()

	return NextResponse.json({ count: count + 1 })
} Finally, we create component to display the page views which we can use in our blog posts ViewCounter.tsx 'use client'

import { useEffect } from 'react'
import useSWR from 'swr'

import fetcher from '@/lib/fetcher'
import { PostView } from '@/lib/types'

export default function ViewsCounter({ slug, trackView }: { slug: string; trackView: boolean }) {
	const { data } = useSWR<PostView>(`/api/views/${slug}`, fetcher)
	const views = new Number(data?.count || 0)

	useEffect(() => {
		const registerView = () => {
			fetch(`/api/views/${slug}`, {
				method: 'POST',
			})
		}

		if (trackView) {
			registerView()
		}
	}, [slug])

	return (
		<p className="font-mono text-sm tracking-tighter">
			{data ? `${views.toLocaleString()} views` : '--- views'}
		</p>
	)
} Conclusion Now we have a working page views counter that is connected to our Turso database. You can use this method to add page views to any website that is built with Next.js. This article was . For more articles like this, . Real-time page views with Next.js, Turso and Drizzle ORM originally posted on News47ell.com click here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

How to Add Real-time Page Views to Your Next.js Website

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Great Articles On Data Science And Programming!

10 FinTech Trends in 2021 [Part II]

10 Financial Predictions for 2021 to Protect Your Wealth

13 API Metrics That Every Platform Team Should be Tracking

If You’re Trying to Talk to Everybody, You’re Not Reaching Anybody

2017: A Data Odyssey

10 Great Articles On Data Science And Programming!

10 FinTech Trends in 2021 [Part II]

10 Financial Predictions for 2021 to Protect Your Wealth

13 API Metrics That Every Platform Team Should be Tracking

If You’re Trying to Talk to Everybody, You’re Not Reaching Anybody

2017: A Data Odyssey

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps