Aller au contenu

Connexion Démarrer gratuitement

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

Next.js install

Next.js ships a <Script> component optimised for loading third-party scripts without blocking rendering. That's the recommended method.

App Router (Next 13+)

In app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="wmf"
          src="https://wheremyflow.com/w.js"
          data-site="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router (Next 12 and earlier)

In pages/_document.tsx or pages/_app.tsx:

import Script from 'next/script';

// inside the root component, after other scripts
<Script
  id="wmf"
  src="https://wheremyflow.com/w.js"
  data-site="YOUR_SITE_ID"
  strategy="afterInteractive"
/>;

Notes

afterInteractive strategy: the script loads after hydration, without blocking the initial render.
The id attribute is required by Next for de-duplication.
For dynamic routes, the snippet loads once (at the layout level); client-side transitions are tracked automatically by our popstate/pushState listener.