InstallNext.js

Next.js

App Router

Add the tag to the root layout’s <head>. Next.js renders it on every page.

app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script
          defer
          src="https://lynq.byharsh.com/js/lynq.js"
          data-site="your-site.com"
          data-vitals
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

next/script works too, with strategy="afterInteractive" and the same attributes. The plain tag is simpler and loads earlier.

Pages Router

Use next/script in pages/_app.tsx so the tag is on every page:

pages/_app.tsx
import Script from "next/script";
import type { AppProps } from "next/app";
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://lynq.byharsh.com/js/lynq.js"
        data-site="your-site.com"
        data-vitals
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

Client-side navigation

Next.js changes the page without reloading. Lynq watches the History API and records a pageview each time the path changes, so <Link> navigations count. Nothing to configure; details in single-page apps.

Custom events from components

window.lynq exists once the script has loaded. Call it from event handlers, never during render:

<button onClick={() => window.lynq?.track("signup", { plan: "pro" })}>Start free</button>

Add the TypeScript declaration so window.lynq is typed.

Local development

Lynq ignores localhost unless the tag has data-allow-localhost, so running next dev never pollutes your numbers.

Plain HTMLAstro