Next.js-integratie | cside docs

Installatie

Installeer het cside Next.js-pakket:

npm i @cside.dev/next

Setup

Voeg het CSideScript-component toe aan uw 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>
  );
}

Voeg het CSideScript-component toe aan uw aangepaste 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

Hoewel het cside script de meeste scriptonderschepping automatisch afhandelt, vereisen sommige gevallen server-side prefixing voor optimale prestaties en Firefox-compatibiliteit. De CLI-tool kan helpen bij statische builds.