Integracion con Next.js

Instalacion

Instala el paquete de cside para Next.js:

npm i @cside.dev/next

Configuracion

Agrega el componente CSideScript a tu layout raiz:

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

Agrega el componente CSideScript a tu documento personalizado:

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

Prefijado del lado del servidor

Aunque el script de cside maneja la mayoria de las intercepciones de scripts automaticamente, algunos casos requieren prefijado del lado del servidor para un rendimiento optimo y compatibilidad con Firefox. La herramienta CLI puede ayudar con compilaciones estaticas.