Integration Next.js | cside docs

Installation

Installez le package cside pour Next.js :

npm i @cside.dev/next

Configuration

Ajoutez le composant CSideScript a votre layout racine :

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

Ajoutez le composant CSideScript a votre document personnalise :

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

Prefixage cote serveur

Bien que le script cside gere automatiquement la plupart des interceptions de scripts, certains cas necessitent un prefixage cote serveur pour des performances optimales et une compatibilite avec Firefox. L’outil CLI peut aider pour les builds statiques.