Next.js

Add Reignat to App Router or Pages Router with Next.js Script.

Add the script

Copy your project ID from Settings → General, then add the tracker to the right file for your router.

✦

Use Next.js Script. It loads the tracker outside your app bundle.

App Router

Add the script to your root app/layout.tsx:

app/layout.tsx

import Script from "next/script" export default function RootLayout({ children }) {  return (    <html>      <body>        {children}        <Script          src="https://www.reignat.com/tracker.js"          data-site="your-project-id"          strategy="afterInteractive"        />      </body>    </html>  )}

import Script from "next/script" export default function RootLayout({ children }) {  return (    <html>      <body>        {children}        <Script          src="https://www.reignat.com/tracker.js"          data-site="your-project-id"          strategy="afterInteractive"        />      </body>    </html>  )}

Pages Router

Add the script to your pages/_app.tsx:

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://www.reignat.com/tracker.js"        data-site="your-project-id"        strategy="afterInteractive"      />    </>  )}

import Script from "next/script"import type { AppProps } from "next/app" export default function App({ Component, pageProps }: AppProps) {  return (    <>      <Component {...pageProps} />      <Script        src="https://www.reignat.com/tracker.js"        data-site="your-project-id"        strategy="afterInteractive"      />    </>  )}

Verify

Deploy your app and visit any page. A pageview should appear in your Reignat dashboard within seconds.

ℹ

Reignat ignores localhost and 127.0.0.1 automatically. Open your live site, not the dev server.