Installazione Next.js

Next.js dispone di un componente <Script> ottimizzato per caricare script esterni senza rallentare la pagina. È il metodo che consigliamo.

#App Router (Next 13+)

In app/layout.tsx:

import Script from 'next/script';

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

#Pages Router (Next 12 e precedenti)

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

import Script from 'next/script';

// nel componente radice, dopo gli altri script
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="miosito.com"
  strategy="afterInteractive"
/>;

#Note

• Strategia afterInteractive: il codice si carica quando la pagina è interattiva, senza bloccare la prima visualizzazione.
• Next.js richiede l'attributo id per non inserire il codice due volte.
• Per le route dinamiche, inserisci il codice una sola volta (nel layout). I cambi di pagina lato browser (<Link>, router.push, il pulsante Indietro — tutto ciò che passa per la History API del browser) sono conteggiati in automatico, senza alcuna configurazione: a ogni cambio di percorso, la pagina che si lascia viene inviata con la sua durata e la sua profondità di scorrimento, poi inizia una nuova pagina vista.
• Viene inviato solo il percorso dell'indirizzo: mai i parametri dopo ?, mai il frammento dopo #. Un cambiamento che tocca solo queste parti non conta quindi come una nuova pagina.
• Il sito di provenienza vale solo per la pagina di arrivo, esattamente come in una navigazione classica.
• Lo stesso vale per gli altri siti a pagina singola (Nuxt, React Router, SvelteKit…): una sola installazione, e ogni cambio di percorso viene contato.