Example Application
A complete example of using Locallytics in a Next.js App Router application.
This example demonstrates how to integrate Locallytics into a Next.js App Router project for privacy-first analytics.
Project Structure
We'll focus on two main files:
app/layout.tsx: Where we add the tracking component.app/page.tsx: Where we fetch and display the analytics data.
1. Add the Tracker
In your root layout, import LocallyticsGrabber and place it inside the <body>. This component handles all pageview tracking automatically.
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { LocallyticsGrabber } from "locallytics";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Locallytics Test App",
description: "Testing the Locallytics analytics SDK",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
{/* The tracker component takes no props and renders nothing visible */}
<LocallyticsGrabber />
</body>
</html>
);
}2. Display the Data
In any Server Component (like a page or dashboard), use LocallyticsData() to fetch your metrics.
import { LocallyticsData } from "locallytics";
import Link from "next/link";
export default async function Home() {
// Fetch analytics data directly from your database
const data = await LocallyticsData();
return (
<main>
<h1>Locallytics Dashboard</h1>
<p>Real-time privacy-first analytics.</p>
<nav>
<Link href="/about">About Page</Link>
<Link href="/contact">Contact Page</Link>
</nav>
{/* Display the raw data */}
<pre>
<code>{JSON.stringify(data, null, 2)}</code>
</pre>
</main>
);
}That's it!