Next.js Installation
Install Jetrack in your Next.js application
Jetrack works seamlessly with both Next.js App Router (13+) and Pages Router. Choose the method that matches your Next.js version.
Next.js 13+ (App Router)
For projects using the App Router, add the script to your root layout file.
Installation Steps
Add the script to app/layout.tsx or app/layout.js:
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<Script
src="https://analytics.brandjet.ai/script.js"
data-website-id="your-unique-id"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}Why afterInteractive?
The afterInteractive strategy ensures the tracking script loads after the page becomes interactive, optimizing performance while still capturing all page views.
Next.js 12 and Below (Pages Router)
For older Next.js projects using the Pages Router, add the script to your _document file.
Installation Steps
Add the script to pages/_document.js or pages/_document.tsx:
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<Script
src="https://analytics.brandjet.ai/script.js"
data-website-id="your-unique-id"
strategy="afterInteractive"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Alternative: Using next/head
If you prefer, you can also use the standard next/head component:
import Head from 'next/head'
export default function RootLayout({ children }) {
return (
<>
<Head>
<script
async
defer
data-website-id="your-unique-id"
src="https://analytics.brandjet.ai/script.js"
/>
</Head>
{children}
</>
)
}Automatic Route Tracking
BrandJet automatically detects and tracks route changes in Next.js applications. No additional configuration needed for:
- Client-side navigation with
next/link - Programmatic navigation with
router.push() - Browser back/forward buttons
Environment Variables (Optional)
For better management across environments, you can use environment variables:
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<Script
src="https://analytics.brandjet.ai/script.js"
data-website-id={process.env.NEXT_PUBLIC_BRANDJET_WEBSITE_ID}
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}Then add to your .env.local:
NEXT_PUBLIC_BRANDJET_WEBSITE_ID=your-unique-idTesting
- Run your Next.js development server:
npm run dev - Visit
http://localhost:3000in your browser - Open your BrandJet dashboard
- Navigate between pages to test route tracking
- You should see real-time visitor data appear
Troubleshooting
Script Not Loading
- Verify the Script component is imported from
next/script - Check that your website ID is correct
- Ensure the script is in the
<head>section
Duplicate Page Views
- Make sure you're only adding the script once (in layout or _document, not both)
- Don't add the script to individual pages