Aller au contenu

Connexion Démarrer gratuitement

Fonctionnalités Trafic IA Tarifs Manifeste Aide Audit Contact Connexion Démarrer gratuitement

Instalación en Next.js

Next.js dispone de un componente <Script> optimizado para cargar scripts de terceros sin bloquear el renderizado. Este es el método recomendado.

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="TU_ID_SITIO"
          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="TU_ID_SITIO"
  strategy="afterInteractive"
/>;

Notas

Estrategia afterInteractive: el script se carga después de la hidratación, sin bloquear el renderizado inicial.
El atributo id es obligatorio en Next para deduplicar.
Para las rutas dinámicas, el snippet se coloca una sola vez (en el layout); las transiciones client-side son seguidas automáticamente por nuestro listener popstate/pushState.