4 min de lecture

Intégration Next.js

Ajoutez les analyses Zenovay à votre application Next.js en utilisant le composant Script intégré pour un chargement optimal.

App Router (Next.js 13+)

Ajoutez le composant Script à votre layout racine :

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://api.zenovay.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

Remplacez YOUR_TRACKING_CODE par le code de suivi de votre site. Trouvez-le dans l'application sous Domaines → [votre site] → Général (la carte du script de suivi, onglet Next.js).

Carte du script de suivi affichant l'extrait de script avec les onglets HTML, React, Next.js et First-Party — Votre code de suivi se trouve sur la page Général de vos paramètres de domaine, sous l'onglet Next.js.

Pages Router (Legacy)

Pour le Pages Router, ajoutez le script à _app.tsx :

pages/_app.tsxTSX

import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
return (
  <>
    <Script
      src="https://api.zenovay.com/z.js"
      data-tracking-code="YOUR_TRACKING_CODE"
      strategy="afterInteractive"
    />
    <Component {...pageProps} />
  </>
);
}

Stratégies de script

Next.js fournit différentes stratégies de chargement :

Stratégie	Description	Cas d'utilisation
`afterInteractive`	Se charge après que la page devient interactive	Recommandé pour les analyses
`lazyOnload`	Se charge pendant le temps d'inactivité du navigateur	Scripts non-critiques
`beforeInteractive`	Se charge avant l'hydratation de la page	Scripts critiques uniquement

Stratégie recommandéeTSX

<Script
src="https://api.zenovay.com/z.js"
data-tracking-code="YOUR_TRACKING_CODE"
strategy="afterInteractive"
/>

Variables d'environnement

Utilisez les variables d'environnement pour le code de suivi :

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const trackingCode = process.env.NEXT_PUBLIC_ZENOVAY_ID;

return (
  <html lang="en">
    <head>
      {trackingCode && (
        <Script
          src="https://api.zenovay.com/z.js"
          data-tracking-code={trackingCode}
          strategy="afterInteractive"
        />
      )}
    </head>
    <body>{children}</body>
  </html>
);
}

.env.localBash

NEXT_PUBLIC_ZENOVAY_ID=ZV_ABC123XYZ

Suivi First-Party (Contourner les bloqueurs de publicités)

Pour une meilleure précision, utilisez le suivi first-party :

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://metrics.yourdomain.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

Le suivi first-party nécessite un enregistrement CNAME DNS. Consultez le Guide de suivi First-Party pour les instructions de configuration.

Export statique (Cloudflare Pages)

Pour les exports statiques, le composant Script fonctionne de la même manière :

next.config.jsJavaScript

/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// ... other config
};

module.exports = nextConfig;

Le script de suivi sera intégré dans les pages HTML générées.

Composants serveur

Le script de suivi fonctionne automatiquement avec les React Server Components. Aucune configuration spéciale requise.

Middleware et Edge Runtime

Pour les applications utilisant le runtime Edge, le composant Script côté client gère le suivi comme d'habitude. Les analyses côté serveur peuvent utiliser l'intégration API.

Vérification

Après l'installation :

Construisez et déployez votre application Next.js
Ouvrez DevTools → onglet Network
Recherchez les requêtes à api.zenovay.com
Vérifiez votre Tableau de bord Zenovay pour les données entrantes

Dépannage

Le script ne se charge pas en développement ?

Le script se charge lors de la navigation entre les pages, pas au chargement initial en mode dev
Construisez et prévisualisez (npm run build && npm start) pour tester correctement

Balises de script en double ?

Ajoutez le Script une seule fois dans votre layout racine
Ne l'ajoutez pas dans des pages individuelles

Avertissements de non-concordance d'hydratation ?

Utilisez strategy="afterInteractive" pour éviter les problèmes SSR
Assurez-vous que le script est dans la section <head>

Problèmes de politique de sécurité du contenu ?

Ajoutez api.zenovay.com à la directive script-src de votre CSP
Pour first-party : ajoutez votre sous-domaine CNAME