Integracion con Next.js

Instalacion

Instala el paquete de cside para Next.js:

npm i @cside.dev/next

Configuracion

Agrega el componente CSideScript con el ID de tu equipo. Lo encuentras en Team Settings > General del panel de cside.

Pasa siempre teamId

Sin teamId, el componente carga el host compartido https://proxy.csidetm.com/script.js en lugar del host de tu equipo. Pasa teamId para que el trafico se atribuya a tu equipo.

Agrega el componente CSideScript a tu layout raiz:

// 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>
  );
}

Agrega el componente CSideScript a tu documento personalizado:

// 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 renderiza una etiqueta <script> con referrerpolicy="origin" y acepta estas props:

Prop	Tipo	Por defecto	Descripcion
`teamId`	`string`	ninguno	Tu ID de equipo de cside. Carga el script desde `https://{teamId}.csidetm.com/script.js` (o `csidefd.com` cuando `fingerprint` es `true`). Sin el, se usa el host compartido `proxy`
`fingerprint`	`boolean`	`false`	Carga el script de Device Intelligence desde `csidefd.com` en lugar del script de monitoreo. Combinalo con `teamId` para un host de Device Intelligence con ambito de equipo. La proxima version renombra esta prop a `deviceIntelligence`; `fingerprint` se mantiene como alias
`scriptURLOverride`	`string`	ninguno	Carga el script desde una URL personalizada. Se ignora cuando `teamId` esta definido
`options`	`object`	ninguno	Obsoleta e ignorada. Los ajustes del script se gestionan en el panel

Cualquier otra prop se pasa al elemento <script> subyacente.

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