Integration Next.js | cside docs

Installation

Installez le package cside pour Next.js :

npm i @cside.dev/next

Configuration

Ajoutez le composant CSideScript avec l’ID de votre equipe. Vous le trouvez dans Team Settings > General du tableau de bord cside.

Passez toujours teamId

Sans teamId, le composant charge l’hote partage https://proxy.csidetm.com/script.js au lieu de l’hote de votre equipe. Passez teamId pour que le trafic soit attribue a votre equipe.

Ajoutez le composant CSideScript a votre layout racine :

// app/layout.tsx
import { CSideScript } from "@cside.dev/next";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CSideScript teamId="[your-team-id]" />
        {children}
      </body>
    </html>
  );
}

Ajoutez le composant CSideScript a votre document personnalise :

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import { CSideScript } from "@cside.dev/next";

export default function MyDocument() {
  return (
    <Html lang="en">
      <Head>
        <CSideScript teamId="[your-team-id]" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Props

CSideScript rend une balise <script> avec referrerpolicy="origin" et accepte ces props :

Prop	Type	Par defaut	Description
`teamId`	`string`	aucun	Votre ID d’equipe cside. Charge le script depuis `https://{teamId}.csidetm.com/script.js` (ou `csidefd.com` quand `fingerprint` vaut `true`). Sans lui, l’hote partage `proxy` est utilise
`fingerprint`	`boolean`	`false`	Charge le script Device Intelligence depuis `csidefd.com` a la place du script de surveillance. Combinez-le avec `teamId` pour un hote Device Intelligence associe a l’equipe. La prochaine version renomme cette prop en `deviceIntelligence` ; `fingerprint` reste pris en charge comme alias
`scriptURLOverride`	`string`	aucun	Charge le script depuis une URL personnalisee. Ignore quand `teamId` est defini
`options`	`object`	aucun	Obsolete et ignore. Les parametres du script sont geres dans le tableau de bord

Toute autre prop est transmise a l’element <script> sous-jacent.

<CSideScript teamId="[your-team-id]" fingerprint />