Sign up

Install Piqo on Next.js

Drop the snippet into your root layout and you're tracking.

App Router

  1. Open app/layout.js (or .tsx).
  2. Paste the snippet inside the <head>.
  3. Deploy. App Router fires real navigations on first paint, so pageviews work out of the box.
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script defer data-site="YOUR_SITE_ID" src="https://piqo.app/piqo.js" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pages Router

  1. Open pages/_document.js.
  2. Add the snippet inside the <Head> tag.
  3. For client-side route changes, fire a pageview from router.events.
// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function App({ Component, pageProps }) {
  const router = useRouter();
  useEffect(() => {
    const onChange = () => window.piqo && window.piqo('pageview');
    router.events.on('routeChangeComplete', onChange);
    return () => router.events.off('routeChangeComplete', onChange);
  }, [router.events]);
  return <Component {...pageProps} />;
}
Using next/script? It works too — setstrategy="afterInteractive" and the tracker will load right after hydration.
NextVerify installation