@jlaviole90/tracker-next
v0.1.6
Published
Next.js bindings for @jlaviole90/tracker. Supports App Router and Pages Router.
Readme
@jlaviole90/tracker-next
Next.js adapter for @jlaviole90/tracker.
- App Router — drop
<Webalytics />intoapp/layout.tsx. - Pages Router — wrap
<Component />in_app.tsxwith<WebalyticsPages />.
The adapter listens for Next's native route changes (usePathname /
useSearchParams in App Router, router.events in Pages Router) so pageviews
never double-fire from the core tracker's History API patching.
Install
npm install @jlaviole90/tracker @jlaviole90/tracker-nextApp Router
// app/layout.tsx
import { Webalytics } from "@jlaviole90/tracker-next";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<Webalytics
siteId={process.env.NEXT_PUBLIC_WEBALYTICS_SITE_ID!}
host={process.env.NEXT_PUBLIC_WEBALYTICS_HOST!}
/>
</body>
</html>
);
}<Webalytics /> is already wrapped in a <Suspense> boundary internally, so
static prerender works without you adding one.
Custom events
"use client";
import { getTracker, useWebalytics } from "@jlaviole90/tracker-next";
export function SignupButton() {
return <button onClick={() => getTracker().track("signup", { plan: "pro" })}>Sign up</button>;
}useWebalytics() returns the same instance; useful inside deep component
subtrees.
Pages Router
// pages/_app.tsx
import { WebalyticsPages } from "@jlaviole90/tracker-next/pages";
export default function App({ Component, pageProps }) {
return (
<>
<WebalyticsPages
siteId={process.env.NEXT_PUBLIC_WEBALYTICS_SITE_ID!}
host={process.env.NEXT_PUBLIC_WEBALYTICS_HOST!}
/>
<Component {...pageProps} />
</>
);
}Env
If siteId / host aren't passed as props, the adapter reads:
NEXT_PUBLIC_WEBALYTICS_SITE_IDNEXT_PUBLIC_WEBALYTICS_HOST
These are inlined at build time by Next, so they must be available during
next build.