Simple Analytics for Next.js

Quick Start

Getting Started with Simple Analytics for Next.js

Introduction

Simple Analytics for Next.js allows you to add privacy-friendly web analytics and event tracking to your Next.js website using Simple Analytics in a few simple steps.

This library provides the following features:

No cookie banner required

Cookie-less analytics, no personal data about visitors is stored.

Proxying analytics requests

Analytics requests are proxied to prevent interference by ad blockers.

Track events

Track custom events with metadata, both on the client and server.

Server-side tracking support

Track pageviews on the server without client code using Middleware.

Getting started

To get started with Simple Analytics and start tracking visitors for your Next.js project, follow the steps below:

Install the package

First install the @simpleanalytics/next package using your package manager of choice.

npm i @simpleanalytics/next

Configure environment variables

You need to pass the website domain you have added to the Simple Analytics dashboard as an environment variable:

.env
NEXT_PUBLIC_SIMPLE_ANALYTICS_HOSTNAME=example.com
SIMPLE_ANALYTICS_HOSTNAME=example.com

Update Next.js config

The withSimpleAnalytics plugin enables proxying client-side tracking requests, and improves accuracy during server-side tracking.

Update your Next.js configuration, located in the project root, as follows:

import type { NextConfig } from "next";
import withSimpleAnalytics from "@simpleanalytics/next/plugin";
 
const nextConfig: NextConfig = {
  /* your existing config */
};
 
export default withSimpleAnalytics(nextConfig);

Add the SimpleAnalytics component in your layout (optional)

Server-side tracking

The use of the SimpleAnalytics component is required to enable client-side tracking. If you are instead interested in server-side tracking, see the relevant guides for Pageview and Event Tracking.

The SimpleAnalytics component injects the Simple Analytics tracking script into your Next.js website, enabling collection of pageviews for visitors.

app/layout.tsx
import { SimpleAnalytics } from "@simpleanalytics/next";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
        <SimpleAnalytics />
      </body>
    </html>
  );
}

That's it! You should be able to see your visitor metrics in the Simple Analytics dashboard.

Next steps

Learn more about how you can start tracking events or customizing pageview tracking:

Tracking events

Learn how to track events in your application.

Tracking pageviews

Learn how to add advanced pageview tracking to your application.

Next

Tracking Pageviews

On this page