This package provides a simple way to add privacy-friendly pageview and event tracking using Simple Analytics to your Next.js application.
You can find the full documentation for this package at simpleanalytics-next-docs.vercel.app.
To install the package, run:
npm i @simpleanalytics/nextYou need to pass the website domain you have added to the Simple Analytics dashboard as an environment variable:
NEXT_PUBLIC_SIMPLE_ANALYTICS_HOSTNAME=example.com
SIMPLE_ANALYTICS_HOSTNAME=example.comTo enable client-side tracking and to ensure the Simple Analytics script you must add the Next.js plugin withSimpleAnalytics from @simpleanalytics/next in your Next.js config (next.config.ts):
import { NextConfig } from "next";
import withSimpleAnalytics from "@simpleanalytics/next/plugin";
const nextConfig: NextConfig = {
/* the rest of your Next.js config */
};
export default withSimpleAnalytics(nextConfig);The client-side analytics component, SimpleAnalytics, imports the Simple Analytics tracking script:
import { SimpleAnalytics } from "@simpleanalytics/next";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{children}
<SimpleAnalytics />
</body>
</html>
);
}To start tracking programmatically tracking events in client components use the trackEvent function.
This requires the <SimpleAnalytics /> component to be present on the page or layout.
"use client";
import { trackEvent } from "@simpleanalytics/next";
import { useState } from "react";
export default function Page() {
return (
<div>
<button
onClick={() => {
trackEvent("clicked");
}}
>
increment
</button>
</div>
);
}To track events in server actions, use the trackEvent function from @simpleanalytics/next/server.
This function requires you to pass the request headers that can be obtained using headers.
"use server";
import { after } from "next/server";
import { headers } from "next/headers";
import { trackEvent } from "@simpleanalytics/next/server";
export async function exampleAction() {
// Add your logic here...
after(async () => {
await trackEvent("event_in_example_action", {
headers: await headers(),
});
});
return { success: true };
}