@cside.dev/next
v1.2.1
Published
Next.js component
Readme
@cside.dev/next
Integrate cside into your NextJS project with ease.
Installation
# npm
npm i @cside.dev/next
# yarn
yarn add @cside.dev/next
# pnpm
pnpm i @cside.dev/nextMinimum release age
We recommend configuring a minimum release age so your package manager only installs versions that have been published for at least 7 days. Compromised package versions are typically detected and unpublished within days of publication, so a cooldown protects you from npm supply chain attacks. This applies to all your dependencies, not just this package.
# npm (.npmrc, in days)
min-release-age=7# yarn (.yarnrc.yml, as a duration string)
npmMinimalAgeGate: "7d"# pnpm (pnpm-workspace.yaml, in minutes)
minimumReleaseAge: 10080Usage
NextJS
Pages Router
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import { CSideScript } from "@cside.dev/next";
export default function Document() {
return (
<Html lang="en">
<Head>
<CSideScript /> {/* <- Here */}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}App Router
// layout.tsx
import { CSideScript } from "@cside.dev/next";
export default function Layout({ children }) {
return (
<>
<CSideScript /> {/* <- Here */}
{children}
</>
);
}Props
| Prop | Type | Default | Description |
| ------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| teamId | string | — | Your cside team ID. Loads the script from https://{teamId}.csidetm.com/script.js. |
| fingerprint | boolean | false | Load the fingerprinting script instead of the default monitoring (tag manager) script. Swaps the domain from csidetm.com to csidefd.com. |
| scriptURLOverride | string | — | Use a fully-custom script URL instead of building one from teamId. Useful for self-hosted proxies and testing. |
Pass a teamId to load your team-scoped script:
<CSideScript teamId="your-team-id" />To load the fingerprinting script for that team:
<CSideScript teamId="your-team-id" fingerprint />If neither teamId nor scriptURLOverride is provided, the component falls back to the default proxy script at https://proxy.csidetm.com/script.js (or https://proxy.csidefd.com/script.js when fingerprint is true).