Installatie Next.js

Next.js biedt een geoptimaliseerde <Script>-component om externe scripts te laden zonder de pagina te vertragen. Dit is de methode die wij aanbevelen.

#App Router (Next 13+)

In app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="nl">
      <body>
        {children}
        <Script
          id="snorklee"
          src="https://snorklee.com/w.js"
          data-site="uwsite.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

#Pages Router (Next 12 en ouder)

In pages/_document.tsx of pages/_app.tsx:

import Script from 'next/script';

// in de rootcomponent, na de andere scripts
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="uwsite.com"
  strategy="afterInteractive"
/>;

#Opmerkingen

• Strategie afterInteractive: de code laadt zodra de pagina interactief is, zonder de eerste weergave te blokkeren.
• Next.js vraagt om het attribuut id zodat de code niet twee keer wordt geplaatst.
• Voor dynamische routes plaatst u de code slechts één keer (in de layout). Paginawissels aan de browserkant (<Link>, router.push, de terugknop — alles wat via de History API van de browser loopt) worden automatisch geteld, zonder dat u iets hoeft in te stellen: bij elke padwijziging wordt de verlaten pagina verstuurd met haar duur en scrolldiepte, waarna een nieuwe paginaweergave begint.
• Alleen het pad van het adres wordt verstuurd: nooit de parameters na ?, nooit het fragment na #. Een wijziging die alleen die raakt, telt dus niet als een nieuwe pagina.
• De verwijzende site geldt alleen voor de landingspagina, net als bij een klassieke navigatie.
• Hetzelfde geldt voor andere sites van één pagina (Nuxt, React Router, SvelteKit…): één installatie, en elke padwijziging wordt geteld.