Next.js Integration

Installation

Install the cside Next.js package:

npm i @cside.dev/next

Setup

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

Server-side prefixing

While the cside script handles most script interception automatically, some cases require server-side prefixing for optimal performance and Firefox compatibility.

See Server-side Prefixing for details, or use the CLI tool for static builds.

Previous

Adding our script

Next

CLI Integration

On this page

InstallationSetupServer-side prefixing