Next.js Installation Guide

Next.js provides an optimized next/script component that is perfect for loading third-party tracking scripts like ours without degrading your Core Web Vitals.

App Router (Next 13+)

If you are using the modern App Router (app directory), you should place the script inside your Root Layout.

Open app/layout.tsx (or .jsx) and import the Script component:

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        
        {/* Discover Mac Apps Tracker */}
        <Script 
          src="https://discovermacapps.com/track.js" 
          data-program-id="YOUR_PROGRAM_ID"
          strategy="afterInteractive" 
        />
      </body>
    </html>
  )
}

[!TIP] The strategy="afterInteractive" ensures the script loads early, but only after your core application code has hydrated.

Pages Router

If you are using the older Pages Router (pages directory), add the script to your custom _document.tsx or _app.tsx file.

// pages/_app.tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script 
        src="https://discovermacapps.com/track.js" 
        data-program-id="YOUR_PROGRAM_ID"
        strategy="afterInteractive" 
      />
    </>
  )
}

Client-Side Navigation

Next.js relies heavily on client-side routing via the <Link> component. Our track.js script automatically monitors history.pushState. It will accurately detect URL changes and query parameters even when the page doesn't do a full reload. You don't need any custom useEffect hooks.