Aller au contenu
snorklee
Connexion Démarrer gratuitement
Fonctionnalités Trafic IA Tarifs Manifeste Aide Audit Contact Connexion Démarrer gratuitement

Installatie Next.js

Next.js biedt een geoptimaliseerde <Script>-component voor het laden van scripts van derden zonder de rendering te blokkeren. Dit is de aanbevolen methode.

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="UW_SITE_ID"
          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="UW_SITE_ID"
  strategy="afterInteractive"
/>;

Opmerkingen

  • Strategie afterInteractive: het script laadt na de hydratatie, zonder de initiële rendering te blokkeren.
  • Het attribuut id is verplicht voor deduplicatie door Next.
  • Voor dynamische routes wordt het snippet slechts eenmaal geplaatst (in de layout); client-side navigatie wordt automatisch bijgehouden via onze popstate/pushState-listener.