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.
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.