Next.js

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

Rekommenderat: npm-paket

Använd vårt officiella @savri/tracker-paket för bästa Next.js-integration med TypeScript-stöd och React hooks.

Använda @savri/tracker (Rekommenderat)

1. Installera paketet

npm install @savri/tracker

2a. App Router (Next.js 13+)

Lägg till providern i din root layout:

app/layout.tsx

import { SavriProvider } from '@savri/tracker/react'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <SavriProvider siteId={process.env.NEXT_PUBLIC_SAVRI_SITE_ID!}>
          {children}
        </SavriProvider>
      </body>
    </html>
  )
}

2b. Pages Router

Lägg till providern i _app.tsx:

pages/_app.tsx

import { SavriProvider } from '@savri/tracker/react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SavriProvider siteId={process.env.NEXT_PUBLIC_SAVRI_SITE_ID!}>
      <Component {...pageProps} />
    </SavriProvider>
  )
}

3. Spåra events

Använd useTracker-hooken i vilken klientkomponent som helst:

'use client'

import { useTracker } from '@savri/tracker/react'

export function SignupButton() {
  const { trackEvent } = useTracker()

  const handleClick = () => {
    trackEvent('Signup Click', { plan: 'pro' })
  }

  return (
    <button onClick={handleClick}>
      Sign up
    </button>
  )
}

Alternativ: Script-tagg

Om du hellre inte vill använda npm kan du använda Next.js Script-komponenten.

App Router med Script

app/layout.tsx

import Script from 'next/script'

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

Pages Router med Script

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="YOUR-SITE-ID"
        data-api="https://besokskollen.se"
        src="https://besokskollen.se/script.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Endast produktion

Om du bara vill spåra i produktion:

// With npm package
<SavriProvider
  siteId={process.env.NEXT_PUBLIC_SAVRI_SITE_ID!}
  disabled={process.env.NODE_ENV !== 'production'}
>

// Or with script tag
{process.env.NODE_ENV === 'production' && (
  <Script ... />
)}

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 fullständig SDK-dokumentation →Se alla integrationsguider →