How-to Integrate Plausible Analytics With Next.js and Vercel?

Last Updated : 30 May, 2024

Adding basic analytics to your website or your application is a critical way to gauge the performance and even detect some usability issues through the lifespan of your app.

In this tutorial, we will learn how to create a basic Nextjs application integrated with Plausible and deploy it on Vercel. Here is a quick preview of what we will be building.

Prerequisites:

Why Plausible?

Plausible is an open-source, privacy-focused alternative to Google Analytics. If you want to use it for a business application where you need to keep track of what buttons users click and what they do, Plausible may not be for you.

But, if you just want a simple implementation where you want to know how many visits your blog is getting, plausible is the quickest and best solution by far. It is lightweight, open source, and fully compliant with GDPR, and CCPA. So it might just be the next powerful tool in your arsenal.

You can even check out the live demo on the Plausible website to see how it will look once you deploy it on your website. Checkout the demo: https://plausible.io/plausible.io

Approach to integrating Plausible with Next.js

Creating a basic Nextjs application using Create Next App npm package by Vercel. Then we will be adding different pages to our application which we will be tracking using plausible.
Deploying our application to Vercel by importing it from GitHub.
Creating a free plausible account for learning purpose and configuring it to track our deployed app, using the production domain Vercel provides.
Using a package to integrate plausible into our Nextjs application and redeploying it to Vercel.

Steps to Setup a NextJS App

Step 1: Create a new next app

$ npx create-next-app@latest plausible-integration

then agree to the default options

Pasted-image-20240520100143 — output of selected configurations

Step 2: Moving into the folder we created

$ cd plausible-integration

Step 3: Removing the boilerplate code and creating a basic application.

Project structure:

Screenshot-2024-05-20-155039 — Folder structure of the 'scr' directory

Example: Below is an example of creating a simple NextJS App.

CSS

/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.padding-x {
  padding-left: max(calc(50vw - 30rem), 4vw);
  padding-right: max(calc(50vw - 30rem), 4vw);
}

JavaScript

// src/components/header.tsx
import Link from "next/link";

export default function Header() {
    return (
        <header className="w-full flex justify-between">
            <Link href="/">
                <h1 className="text-lg font-medium">LOGO</h1>
            </Link>

            <div className="flex gap-6">
                <Link href="/products" className="text-slate-500 hover:underline">
                    Products
                </Link>
                <Link href="/pricing" className="text-slate-500 hover:underline">
                    Pricing
                </Link>
                <Link href="/about" className="text-slate-500 hover:underline">
                    About
                </Link>
            </div>
        </header>
    );
}

JavaScript

// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Header from "@/components/header";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
    title: "Plausible Integrations",
    description: "Intergrating plausible with next app",
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <body
                className={
                    inter.className +
                    " w-full h-full min-h-screen flex flex-col padding-x py-6"
                }
            >
                <Header />
                {children}
            </body>
        </html>
    );
}

JavaScript

// src/app/page.tsx
export default function Home() {
    return (
        <main className="w-full h-full grow flex text-4xl 
                         justify-center items-center">
            Home Page
        </main>
    );
}

JavaScript

// src/app/about/page.tsx
export default function About() {
    return (
        <main className="w-full h-full grow flex text-4xl 
                         justify-center items-center">
            About Page
        </main>
    );
}

JavaScript

// src/app/products/page.tsx
export default function Products() {
    return (
        <main className="w-full h-full grow flex text-4xl
                         justify-center items-center">
            Products Page
        </main>
    );
}

JavaScript

// src/app/pricing/page.tsx
export default function Pricing() {
    return (
        <main className="w-full h-full grow flex text-4xl
                         justify-center items-center">
            Pricing Page
        </main>
    );
}

Start your application using the below command:

npm run dev

Output:

Deploying to Vercel

Step 1: Login into your Vercel account

Vercel Login page

Pasted-image-20240520110003 — Vercel website login

Step 2: Add new project

Click on Add New and select project.

add-new-vercel — creating a new vercel project

Step 3: Import repository

If you have configure Vercel on GitHub than Import your git repository or else, import via third party repository.

import-git-repo-vercel — importing repository via GitHub or third-party

Step 4: Deploy

Click Deploy and your good to go!! Wait for Vercel to deploy your app, the build process might take some time. But you have to only do this once. When you push new commits from git, Vercel will trigger a CI/CD pipeline and deploy your commits for you.

Save the production domain as we will need it for plausible later.

save-domain — Copy the production domain

Steps to Setup a Plausible

Register and Setup domain

Go to the plausible website and start your free trial. Once registered it will ask you for your domain. Input your Vercel production domain and continue.

input-domain — configure plausibility for Nextjs app

Click on Add snippet. They'll give you a JavaScript snippet to embed into your app, but since we're doing this through Nextjs we'll do it a little differently, so let's move on for now.

Integration with Nextjs

Plausible has a community created Nextjs integration. Using the next-plausible npm package.

GitHub repository of next plausible package: https://github.com/4lejandrito/next-plausible

If you looking into the packages README.md file it specifies two integration methods. One for the Pages router and one for the App router.

JavaScript

// App router
// app/layout.js
import PlausibleProvider from 'next-plausible'

export default function RootLayout({ children }) {
    return (
        <html>
            <head>
                <PlausibleProvider domain="example.com" />
            </head>
            <body>{children}</body>
        </html>
    )
}

JavaScript

// Pages router
// pages/_app.js
import PlausibleProvider from 'next-plausible'

export default function MyApp({ Component, pageProps }) {
    return (
        <PlausibleProvider domain="example.com">
            <Component {...pageProps} />
        </PlausibleProvider>
    )
}

Since in this project we are using the App router we will proceed with the app router integration.

Step 1: Install plausible package

$ npm i next-plausible

Step 2: Update Layout

JavaScript

// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Header from "@/components/header";
import PlausibleProvider from "next-plausible";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
    title: "Plausible Integrations",
    description: "Intergrating plausible with next app",
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <head>
                <PlausibleProvider domain="plausible-integration.vercel.app" />
            </head>
            <body
                className={
                    inter.className +
                    " w-full h-full min-h-screen flex flex-col padding-x py-6"
                }
            >
                <Header />
                {children}
            </body>
        </html>
    );
}

Step 3: Commit and Deploy

Once you have updated the application commit your changes and push it to GitHub. Vercel will trigger an event and redeploy your application. Once done visit your website and check plausible dashboard.

How to Add Analytics in Next.js with Plausible

Anonymous

Improve

Article Tags :

How-to Integrate Plausible Analytics With Next.js and Vercel?

Prerequisites:

Why Plausible?

Approach to integrating Plausible with Next.js

Steps to Setup a NextJS App

Project structure:

Deploying to Vercel

Step 1: Login into your Vercel account

Step 2: Add new project

Step 3: Import repository

Step 4: Deploy

Steps to Setup a Plausible

Register and Setup domain

Integration with Nextjs

Step 1: Install plausible package

Step 2: Update Layout

Step 3: Commit and Deploy

Similar Reads

Thank You!

What kind of Experience do you want to share?