Next.js

Integration för Next.js 13+ med App Router eller Pages Router.

Svårighetsgrad: Medel

Tar cirka 5-10 minuter

App Router (Next.js 13+)

Lägg till scriptet i din root layout:

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="sv">
      <head>
        <Script
          defer
          data-site-id="DIN-SAJT-ID"
          data-api="https://besokskollen.se"
          src="https://besokskollen.se/script.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Pages Router

Lägg till scriptet i _app.tsx eller _document.tsx:

pages/_app.tsx

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        defer
        data-site-id="DIN-SAJT-ID"
        data-api="https://besokskollen.se"
        src="https://besokskollen.se/script.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

SPA Navigation

Vårt script hanterar automatiskt client-side navigation i Next.js. Det hookar in i history.pushState och popstate-events för att spåra sidvisningar när användare navigerar utan full page reload.

Anpassade events

För att spåra events i React-komponenter:

'use client'

declare global {
  interface Window {
    va?: (type: string, name: string, props?: object) => void;
  }
}

export function SignupButton() {
  const handleClick = () => {
    // Spåra eventet
    window.va?.('event', 'Signup Click', { plan: 'pro' });
  };

  return (
    <button onClick={handleClick}>
      Registrera dig
    </button>
  );
}

TypeScript-tips

Lägg till declare global för att få TypeScript-stöd för window.va-funktionen.

Endast produktion

Om du bara vill spåra i produktion:

{process.env.NODE_ENV === 'production' && (
  <Script
    defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js"
    strategy="afterInteractive"
  />
)}

Content Security Policy (CSP)

Om din sajt använder CSP behöver du tillåta besokskollen.se i dina headers.

Next.js på Vercel?

Använd vercel.json istället för next.config.js för CSP-headers. Detta säkerställer att headers alltid skickas korrekt.

Läs mer om CSP-konfiguration →

Behöver du hjälp?

Se alla integrationsguider →