Aller au contenu

Connexion Démarrer gratuitement

Fonctionnalités Tarifs Comparatif Manifeste Aide Audit Contact Démo Connexion

Installation Next.js

Next.js dispose d'un composant <Script> optimisé pour charger des scripts tiers sans bloquer le rendu. C'est la méthode recommandée.

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="wmf"
          src="https://wheremyflow.com/w.js"
          data-site="VOTRE_ID_SITE"
          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="wmf"
  src="https://wheremyflow.com/w.js"
  data-site="VOTRE_ID_SITE"
  strategy="afterInteractive"
/>;

Notes

Stratégie afterInteractive : le script charge après l'hydratation, sans bloquer le rendu initial.
L'attribut id est requis par Next pour dédupliquer.
Pour les routes dynamiques, le snippet est posé une seule fois (au layout) ; les transitions client-side sont automatiquement trackées par notre listener popstate/pushState.