Integração Next.js

Instalação

Instale o pacote Next.js do cside:

npm i @cside.dev/next

Configuração

Adicione o componente CSideScript com o ID da sua equipe. Você o encontra em Team Settings > General no painel do cside.

Sempre passe teamId

Sem teamId, o componente carrega o host compartilhado https://proxy.csidetm.com/script.js em vez do host da sua equipe. Passe teamId para que o tráfego seja atribuído à sua equipe.

Adicione o componente CSideScript ao seu 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>
  );
}

Adicione o componente CSideScript ao seu 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 uma tag <script> com referrerpolicy="origin" e aceita estas props:

Prop	Tipo	Padrão	Descrição
`teamId`	`string`	nenhum	Seu ID de equipe do cside. Carrega o script de `https://{teamId}.csidetm.com/script.js` (ou `csidefd.com` quando `fingerprint` é `true`). Sem ele, o host compartilhado `proxy` é usado
`fingerprint`	`boolean`	`false`	Carrega o script de Device Intelligence de `csidefd.com` em vez do script de monitoramento. Combine com `teamId` para um host de Device Intelligence com escopo de equipe. A próxima versão renomeia esta prop para `deviceIntelligence`; `fingerprint` continua suportada como alias
`scriptURLOverride`	`string`	nenhum	Carrega o script de uma URL personalizada. Ignorado quando `teamId` está definido
`options`	`object`	nenhum	Obsoleta e ignorada. As configurações do script são gerenciadas no painel

Qualquer outra prop é repassada ao elemento <script> subjacente.

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