Next.js
Add the tracker to a Next.js app with next/script.
Last updated June 3, 2026
Add the Grometrics tracker to a Next.js app using next/script. Works with the App Router and Pages Router.
Prerequisites
- Next.js 13+ with App Router or Pages Router
- A Grometrics site ID from Settings > Tracking
Steps
Open the root layout
Use app/layout.tsx for App Router, or pages/_app.tsx for Pages Router.
Add next/script
Load the tracker after the page becomes interactive.
Replace YOUR_SITE_ID with your site ID from Settings > Tracking.
app/layout.tsx
1import Script from 'next/script'23export default function RootLayout({ children }: { children: React.ReactNode }) {4return (5<html lang="en">6<body>7{children}8<Script src="https://cdn.grometrics.io/g.js" data-site="YOUR_SITE_ID" strategy="afterInteractive" />9</body>10</html>11)12}
Deploy
Deploy the app and open a production page.
Options / Configuration
| Option | Type | Required | Description |
|---|---|---|---|
| src | string | ✓ | Tracker script URL |
| data-site | string | ✓ | Your Grometrics site ID |
| strategy | string | ✓ | Use afterInteractive for Next.js |
What happens next
Open Realtime after deployment and confirm the first pageview appears.
Verify your setup
Verify your setup
Troubleshooting
No event appears
Confirm the site ID matches Settings > Tracking and that the latest published code is running.
Was this page helpful?