DataLook

Install DataLook on Next.js — the plain script tag, or the first-party proxy that beats ad blockers. Both on one page.

Use the built-in <Script> component in your root layout.

Add <Script> to your root layout

App Router: edit app/layout.tsx. The afterInteractive strategy loads it without blocking render.

app/layout.tsx

import Script from 'next/script'export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        {children}        <Script          src="https://cdn.datalook.app/s.js"          data-site="YOUR_SITE_ID"          strategy="afterInteractive"        />      </body>    </html>  )}

The proxy install serves both s.js and the collector from your own domain, so ad blockers — which match on domain, not path — can't see us. You rewrite one innocuous path prefix to our CDN; the script figures out the rest.

Rewrite one prefix in next.config, then point the script at it.

Add a rewrite

Next.js forwards the request to our CDN server-side, including the visitor IP.

next.config.ts

import type { NextConfig } from 'next'const nextConfig: NextConfig = {  async rewrites() {    return [      { source: '/_axis/:path*', destination: 'https://cdn.datalook.app/:path*' },    ]  },}export default nextConfig

Point the script at the prefix

app/layout.tsx

<Script src="/_axis/s.js" data-site="YOUR_SITE_ID" strategy="afterInteractive" />