Add Jolt to a Next.js application with the built-in Script component. The tracker records the first pageview and watches History API navigation, so App Router and Pages Router route changes are measured automatically.
Add the Jolt script to your root layout.js file using the Next.js Script component:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Script
strategy="afterInteractive"
data-domain="yourdomain.com"
data-api-host="https://usejolt.io/api/event"
src="https://usejolt.io/jolt.js"
/>
{children}
</body>
</html>
)
}Add the script to your _app.js or _document.js file:
<Script
strategy="afterInteractive"
data-domain="yourdomain.com"
data-api-host="https://usejolt.io/api/event"
src="https://usejolt.io/jolt.js"
/>Jolt automatically tracks route changes in Next.js applications without additional router configuration. Keep one Script instance in the root layout or app component so navigation is not counted twice.
Call window.jolt.track('signup_completed') from a Client Component after the action succeeds. For payments or other trusted backend actions, use the Node.js server-side SDK.
Run the production build or open the deployed site, then look for the Jolt script and event request in DevTools. Localhost is not counted unless it matches the domain configured for the project.