Instalación en Next.js
Next.js dispone de un componente <Script> optimizado para cargar scripts externos sin ralentizar la página. Es el método que recomendamos.
App Router (Next 13+)
En app/layout.tsx:
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="es">
<body>
{children}
<Script
id="snorklee"
src="https://snorklee.com/w.js"
data-site="misitio.com"
strategy="afterInteractive"
/>
</body>
</html>
);
}Pages Router (Next 12 y anteriores)
En pages/_document.tsx o pages/_app.tsx:
import Script from 'next/script';
// en el componente raíz, después de los otros scripts
<Script
id="snorklee"
src="https://snorklee.com/w.js"
data-site="misitio.com"
strategy="afterInteractive"
/>;Notas
- Estrategia
afterInteractive: el código se carga cuando la página ya es interactiva, sin bloquear la primera visualización. - Next.js pide el atributo
idpara no colocar el código dos veces. - Para las rutas dinámicas, colocas el código una sola vez (en el layout); los cambios de página del lado del navegador se cuentan de forma automática, sin nada que configurar.