← Docs home

Add Pinfox to your Next.js app

Follow these steps to integrate Pinfox analytics into your Next.js site (App Router or Pages Router).

Next.js App Router (app/layout.js)

In the App Router, use Next.js's Script component in your root layout so the Pinfox script loads on every page. Use strategy="afterInteractive" so it runs after the page becomes interactive.

// app/layout.js (App Router)
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://freemium.pinfox.io/analytics.js"
          data-site-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Replace YOUR_WEBSITE_ID with your Website ID from the Pinfox Dashboard.

Next.js Pages Router (pages/_document.js)

If you use the Pages Router, add the Pinfox script in _document.js inside Head. This ensures the script is included in the HTML for every page.

// pages/_document.js (Pages Router)
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script
          defer
          src="https://freemium.pinfox.io/analytics.js"
          data-site-id="YOUR_WEBSITE_ID"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Replace YOUR_WEBSITE_ID with your actual Website ID. If you don't have a _document.js yet, create it in the pages directory.

Script tag reference

The Pinfox tracking script you need in both cases:

<script
  defer
  src="https://freemium.pinfox.io/analytics.js"
  data-site-id="YOUR_WEBSITE_ID"
></script>

Verify installation

After adding the script:

  • Run your Next.js app and navigate through a few pages.
  • Check your Pinfox dashboard for new pageviews. The first events may take a minute or two to show up.

Troubleshooting Next.js Setup

hydration Mismatch Error?

If you receive a hydration mismatch error when using the Pages Router, ensure you are adding the script in _document.js correctly within the <Head> tag. For the App Router, using the next/script component with strategy="afterInteractive" is the recommended way to avoid any SSR/CSR conflicts.

Middleware & Bot Traffic

Next.js developers often use Middleware for edge functions. Pinfox.io is designed to filter out bot traffic at the script level, but if you're seeing high artificial traffic, you can correlate your Next.js Middleware logs with Pinfox data. Check out our post on identifying real visitors vs bots.

Optimization for Performance

When using Next.js, performance is key. We recommend using `strategy="lazyOnload"` for the Pinfox script if you want to prioritize the delivery of your main bundle above all else. However, `afterInteractive` is generally preferred to capture early page exits.

Why choose Pinfox for your analytics?

Privacy-First & Cookieless

Pinfox doesn't use cookies or any form of persistent tracking. We respect your visitors' privacy and help you comply with GDPR, CCPA, and PECR without needing annoying cookie banners.

Ultra-Lightweight Script

Our tracking script is less than 1KB. It won't slow down your site or affect your Core Web Vitals. Keep your site fast while getting the insights you need.

Real-Time Data Streams

See your traffic as it happens. Our real-time dashboard updates instantly, allowing you to see the immediate impact of your marketing efforts and launches.

No Data Sampling

Unlike Google Analytics, we never sample your data. You get 100% accurate reporting, regardless of how much traffic your website receives.

Frequently Asked Questions

Do I need a cookie banner with Pinfox?

No. Since Pinfox doesn't use cookies and doesn't collect personal data, you don't need to display a cookie consent banner for analytics purposes. This improves your user experience and conversion rates.

Can I track custom events?

Yes! Pinfox supports custom event tracking. You can track button clicks, form submissions, and other user interactions to better understand how visitors engage with your site.

Is Pinfox compatible with SPA frameworks?

Absolutely. Pinfox is built to work seamlessly with modern frameworks like React, Vue, Angular, Next.js, and more. It automatically handles client-side routing and virtual pageviews.

Metrics we track

  • Unique Visitors
  • Total Pageviews
  • Referrer Sources
  • Top Pages & Content
  • Geographic Location
  • Device & Browser Info
← Docs homeStatic HTMLWordPressReactBack to Pinfox