Cookie-Free Analytics for Next.js
Next.js applications need analytics that works with both server-side rendering and client-side navigation. GhostlyX tracks both automatically using a single script tag.
Installation guide
Add the script to your layout
In the App Router, open app/layout.tsx (or app/layout.js) and add the Script component inside the head. In the Pages Router, add it to pages/_app.tsx.
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<Script
src="https://cdn.ghostlyx.com/gx.js"
data-site-id="YOUR_SITE_ID"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}Verify single-page navigation is tracked
GhostlyX automatically tracks route changes in Next.js without any extra configuration. Navigate between pages and confirm each visit appears in your dashboard.
Why Next.js users choose GhostlyX
Next.js is used for SaaS marketing sites, e-commerce storefronts, and content-heavy blogs. GhostlyX handles both static and dynamic pages seamlessly. Because Next.js frequently serves EU users, the cookie-free approach means you avoid the consent banner that most analytics tools require. The script works with Vercel, Netlify, and self-hosted deployments equally.
Cookie-free tracking
No consent banner required under GDPR or PECR
Under 1.5 kB script
Negligible impact on page speed and Core Web Vitals
Real-time dashboard
See visitors as they arrive, updated every few seconds
Free plan available
Start tracking without a credit card
Replacing Google Analytics on Next.js?
See how GhostlyX compares feature by feature, including script size, GDPR compliance, and pricing.
Related integrations
Ready to add GhostlyX to Next.js?
Free plan available. Setup takes 5 minutes. No cookie consent banner required.
Get started free