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

Installation Next.js

Next.js stellt eine optimierte <Script>-Komponente bereit, um Drittanbieter-Skripte zu laden, ohne das Rendering zu blockieren. Dies ist die empfohlene Methode.

App Router (Next 13+)

In app/layout.tsx:

import Script from 'next/script';

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

Pages Router (Next 12 und älter)

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

import Script from 'next/script';

// in der Root-Komponente, nach den übrigen Skripten
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="IHRE_SITE_ID"
  strategy="afterInteractive"
/>;

Hinweise

  • Strategie afterInteractive: das Skript lädt nach der Hydration, ohne das initiale Rendering zu blockieren.
  • Das id-Attribut ist von Next.js zur Deduplizierung erforderlich.
  • Bei dynamischen Routen wird das Snippet nur einmal (im Layout) platziert; clientseitige Übergänge werden automatisch über unseren popstate/pushState-Listener getrackt.