How to Integrate Plausible Analytics With Next.js and Vercel?
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
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:
Folder structure of the ‘scr’ directory
Example: Below is an example of creating a simple NextJS App.
/* 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);
}
// 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>
);
}
// 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>
);
}
// 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>
);
}
// 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>
);
}
// 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>
);
}
// 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:
Website preview
Deploying to Vercel
Step 1: Login into your Vercel account
Vercel Login page
Vercel website login
Step 2: Add new project
Click on Add New and select project.
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.
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.
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.
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.
// 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>
)
}
// 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
// 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.
Contact Us