Steps to Setup a NextJS App

Approach to integrating Plausible with Next.js

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.

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:

Website preview

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:

Tags:

#Next.js #ReactJS #Web Technologies

Approach to integrating Plausible with Next.js

Deploying to Vercel

Steps to Setup a NextJS App

Project structure:

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

Prerequisites:

Similar Reads