Setting Up cside
Next.js Integration
Integrate cside with your Next.js application using the @cside.dev/next package.
Installation
Install the cside Next.js package:
npm i @cside.dev/nextSetup
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 />
{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 />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Server-side prefixing
While the cside script handles most script interception automatically, some cases require server-side prefixing for optimal performance and Firefox compatibility. The CLI tool can help with static builds.
How is this doc?