How-to Integrate Plausible Analytics With Next.js and Vercel?
Last Updated :
23 Jul, 2025
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 configurationsStep 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.
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);
}
// 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 loginStep 2: Add new project
Click on Add New and select project.
creating a new vercel projectStep 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-partyStep 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 domainSteps 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 appClick 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>
)
}
// 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.
Similar Reads
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
React Fundamentals
React IntroductionReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. "Hello, World!" Program in ReactJavaScriptimport React from 'react'; function App() {
6 min read
React Environment SetupTo run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.Pre-requisite:We must have Nodejs installed on our PC. So, the very first step will be
3 min read
React JS ReactDOMReactDOM is a core React package that provides DOM-specific methods to interact with and manipulate the Document Object Model (DOM), enabling efficient rendering and management of web page elements. ReactDOM is used for: Rendering Components: Displays React components in the DOM.DOM Manipulation: Al
2 min read
React JSXJSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, it’s actually a syntax extensi
5 min read
ReactJS Rendering ElementsIn this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.What are React Elements?React elements are the smallest building blocks of a React application. They are different from DOM elements
3 min read
React ListsIn lists, React makes it easier to render multiple elements dynamically from arrays or objects, ensuring efficient and reusable code. Since nearly 85% of React projects involve displaying data collections—like user profiles, product catalogs, or tasks—understanding how to work with lists.To render a
4 min read
React FormsForms are an essential part of any application used for collecting user data, processing payments, or handling authentication. React Forms are the components used to collect and manage the user inputs. These components include the input elements like text field, check box, date input, dropdowns etc.
5 min read
ReactJS KeysA key serves as a unique identifier in React, helping to track which items in a list have changed, been updated, or removed. It is particularly useful when dynamically creating components or when users modify the list. When rendering a list, you need to assign a unique key prop to each element in th
4 min read
Components in React
React Lifecycle In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo
7 min read
React Hooks
Routing in React
Advanced React Concepts
React Projects