Next | Spoar docs

app/providers.tsx:

"use client";

import type { ReactNode } from "react";
import { AnalyticsProvider } from "@spoar/sdk/react";
import { Analytics } from "@spoar/sdk/next";
import { analytics } from "@/lib/analytics";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <AnalyticsProvider client={analytics}>
      <Analytics />
      {children}
    </AnalyticsProvider>
  );
}

app/layout.tsx:

import type { ReactNode } from "react";
import { Providers } from "./providers";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

The provider lives in a Client Component because the client holds functions, which a Server Component layout cannot pass as props.

<Analytics /> sends each pageview with its route template, such as /blog/[slug], so reports group by page type. Create the client with pageviews: false so pageviews are not sent twice.