Varde on Next.js
Add Varde to a Next.js app with one component. Client-side page changes are counted automatically, with the App Router and the Pages Router.
App Router
npm install next-varde// app/layout.tsx
import { Varde } from 'next-varde';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Varde site="YOUR_SITE_ID" autoEvents />
</body>
</html>
);
}Pages Router
// pages/_app.tsx
import type { AppProps } from 'next/app';
import { Varde } from 'next-varde';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Varde site="YOUR_SITE_ID" />
</>
);
}Without the package
The package is a thin wrapper around next/script. This does the same thing:
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script data-site="YOUR_SITE_ID" src="https://vardeanalytics.com/js/script.js" strategy="afterInteractive" />
</body>
</html>
);
}Track goals
Use track() from any client component. Calls made before the script loads are queued, so nothing is lost.
'use client';
import { track } from 'next-varde';
export function SignupButton() {
return <button onClick={() => track('signup', { plan: 'pro' })}>Sign up</button>;
}Add a goal named signup in your dashboard to see it there. See Goals and events.
Options
| Prop | What it does |
|---|---|
site | Your site ID. Required. |
autoEvents | Counts outbound links, file downloads, email and phone clicks. |
ignorePages | Paths to skip, for example ['/admin*']. |
hash | Counts #/route changes as pageviews. |
enabled | Set to false to turn tracking off, for example enabled={process.env.VERCEL_ENV === 'production'} to skip Vercel preview deployments. |
Preview deployments on *.vercel.app are not counted unless you add that domain as a site, because Varde only accepts events from the domain you registered and its subdomains.
Check that it works
Open your site in a normal browser window. The add-site screen shows Connected once the first pageview arrives, and the dashboard fills in within a few minutes. If nothing shows up, see the checklist at the bottom of Install on your platform.