Next.js-integratie | cside docs

Installatie

Installeer het cside Next.js-pakket:

npm i @cside.dev/next

Setup

Voeg het CSideScript-component toe met uw team-ID. U vindt het onder Team Settings > General in het cside-dashboard.

Geef altijd teamId mee

Zonder teamId laadt het component de gedeelde host https://proxy.csidetm.com/script.js in plaats van de host van uw team. Geef teamId mee zodat het verkeer aan uw team wordt toegewezen.

Voeg het CSideScript-component toe aan uw root-layout:

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

Voeg het CSideScript-component toe aan uw aangepaste document:

// 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 rendert een <script>-tag met referrerpolicy="origin" en accepteert deze props:

Prop	Type	Standaard	Beschrijving
`teamId`	`string`	geen	Uw cside team-ID. Laadt het script vanaf `https://{teamId}.csidetm.com/script.js` (of `csidefd.com` wanneer `fingerprint` `true` is). Zonder deze prop wordt de gedeelde `proxy`-host gebruikt
`fingerprint`	`boolean`	`false`	Laadt het Device Intelligence-script vanaf `csidefd.com` in plaats van het monitoringscript. Combineer met `teamId` voor een team-specifieke Device Intelligence-host. De volgende release hernoemt deze prop naar `deviceIntelligence`; `fingerprint` blijft ondersteund als alias
`scriptURLOverride`	`string`	geen	Laadt het script vanaf een aangepaste URL. Wordt genegeerd wanneer `teamId` is ingesteld
`options`	`object`	geen	Verouderd en genegeerd. Scriptinstellingen worden in het dashboard beheerd

Elke andere prop wordt doorgegeven aan het onderliggende <script>-element.

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