Installation Next.js
Next.js fournit un composant <Script> optimisé pour charger des scripts externes sans ralentir l'affichage. C'est la méthode que nous recommandons.
App Router (Next 13+)
Dans app/layout.tsx :
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="fr">
<body>
{children}
<Script
id="snorklee"
src="https://snorklee.com/w.js"
data-site="monsite.com"
strategy="afterInteractive"
/>
</body>
</html>
);
}Pages Router (Next 12 et antérieurs)
Dans pages/_document.tsx ou pages/_app.tsx :
import Script from 'next/script';
// dans le composant racine, après les autres scripts
<Script
id="snorklee"
src="https://snorklee.com/w.js"
data-site="monsite.com"
strategy="afterInteractive"
/>;Notes
- Stratégie
afterInteractive: le code se charge une fois la page interactive, sans bloquer le premier affichage. - L'attribut
idest demandé par Next.js pour éviter les doublons. - Pour les routes dynamiques, vous ne posez le code qu'une seule fois (dans le layout) ; les changements de page côté navigateur sont comptés automatiquement, sans réglage de votre part.