Next.js — React

The components are marked "use client". In the App Router, import one straight into a server component page or layout: no dynamic() and no ssr: false are needed. The page renders on the server and the shader starts in the browser, where WebGPU is. The Pages Router works the same way, from any page under pages/.

import DotGrid from "./components/aperveil/dot-grid/DotGrid";

// A server component: the shader renders as an empty canvas on the server
// and starts in the browser.
export default function Page() {
  return (
    <section style={{ position: "relative", height: "70vh" }}>
      <DotGrid
        style={{ position: "absolute", inset: 0 }}
        fallback={<img src="/hero.jpg" alt="" />}
      />
      <h1 style={{ position: "relative" }}>Your headline</h1>
    </section>
  );
}

• Fallback. Anything can be the fallback, next/image included. It shows only in a browser without WebGPU, after the check, so the server's HTML and the browser's first render always match.
• Blocks. In the App Router a block's stylesheet import works as it is; the Pages Router accepts global CSS in pages/_app.tsx only, so move it there (see Blocks).
• Fonts. Load a block's typefaces with next/font or the Google Fonts link in its README.