Install Jolt in the App Router
Use the Next.js Script component in the root layout so the tracker loads once across the application. Replace the example value with the domain configured in your Jolt project.
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<Script
src="https://usejolt.io/jolt.js"
data-domain="example.com"
strategy="afterInteractive"
/>
</html>
)
}Install Jolt in the Pages Router
Add the same script to pages/_app.js. Keeping it in the application root prevents duplicate trackers when users navigate between pages.
import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://usejolt.io/jolt.js"
data-domain="example.com"
strategy="afterInteractive"
/>
</>
)
}Track client-side routes without duplicate pageviews
Next.js changes routes without loading a completely new document. Jolt watches History API navigation and records those pageviews automatically. Do not add a second router listener unless you have disabled automatic pageview tracking.
If counts look too high, first check that the script appears only once in the rendered document. The complete Next.js integration reference covers both router styles and verification.
Send a custom event after success
Track the outcome, not every click that might lead to it. For example, send signup_completed after the account exists or payment_completed after the payment is confirmed.
window.jolt?.track('signup_completed', {
plan: 'free',
})Event names can contain up to 64 characters. Use stable names that describe completed actions so reports remain understandable as the interface changes.
Connect server actions and backend events
Payments, subscriptions, scheduled jobs, and other trusted outcomes are better sent from the server after they succeed. The Jolt Node.js SDK works in route handlers and server-side code and keeps the project write key away from the browser.
Use the backend tracking guide for single events, batches, and user identification. Browser and server events then appear in the same project and can be used in the same funnel.
Verify the production installation
- Deploy the application with the production domain value.
- Open the published site in a new browser session.
- Navigate between at least two client-side routes.
- Complete one custom action.
- Confirm pageviews and the custom event in Jolt.
Test the built application rather than relying only on local development, where React development behavior and browser tools can produce misleading duplicate requests.
Frequently asked questions
Does Jolt support both Next.js routers?
Yes. Add the tracker once in the root layout for the App Router or in _app.js for the Pages Router.
Do I need to track every route change manually?
No. Jolt watches History API navigation and records client-side route changes automatically. Manual tracking is only necessary when automatic pageviews are disabled.
Why do I see duplicate Next.js pageviews?
The most common cause is loading the tracker more than once or combining automatic tracking with a separate manual router listener. Keep one script at the application root.
Can Next.js server actions send Jolt events?
Yes. Send trusted server events with the Jolt Node.js SDK after an action succeeds. This is useful for payments, subscriptions, jobs, and other backend-confirmed outcomes.