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
idper non inserire il codice due volte. - Per le route dinamiche, inserisci il codice una sola volta (nel layout); i cambi di pagina lato browser sono conteggiati in automatico, senza alcuna configurazione.