Next.js Integration | cside docs

Installation

Install the cside Next.js package:

npm i @cside.dev/next

Setup

Add the CSideScript component with your team ID. You find the team ID under Team Settings > General in the cside dashboard.

Always pass teamId

Without teamId, the component loads the shared https://proxy.csidetm.com/script.js host instead of your team-scoped host. Pass teamId so traffic is attributed to your team.

Add the CSideScript component to your 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>
  );
}

Add the CSideScript component to your custom 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 renders a <script> tag with referrerpolicy="origin" and accepts these props:

Prop	Type	Default	Description
`teamId`	`string`	none	Your cside team ID. Loads the script from `https://{teamId}.csidetm.com/script.js` (or `csidefd.com` when `fingerprint` is `true`). Without it the shared `proxy` host is used
`fingerprint`	`boolean`	`false`	Load the Device Intelligence script from `csidefd.com` instead of the monitoring script. Combine with `teamId` for a team-scoped Device Intelligence host. The next release renames this prop to `deviceIntelligence`; `fingerprint` stays supported as an alias
`scriptURLOverride`	`string`	none	Load the script from a custom URL. Ignored when `teamId` is set
`options`	`object`	none	Deprecated and ignored. Script settings are managed in the dashboard

Any other prop is passed through to the underlying <script> element.

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