Next.js — Documentation

VV components target the App Router.

Client components

Every component is a Client Component. Its file starts with "use client". Import them directly into client trees. If you import one into a Server Component it still works, but it won't animate until it hydrates on the client.

WebGL components need `ssr: false`

Canvas/WebGL components (code-rain, glass-gallery, magnetic-sand) touch window/document and must not be server-rendered. Wrap them with next/dynamic:

source

TSX

import dynamic from "next/dynamic";

const MagneticSand = dynamic(
  () => import("@/components/vv/magnetic-sand/MagneticSand"),
  { ssr: false }
);

export default function Hero() {
  return <MagneticSand />;
}

The CLI prints this snippet for you when you add a WebGL component.

Where files land

With the default alias @/components/vv:

src/ directory → src/components/vv/<slug>/
no src/ → components/vv/<slug>/

init detects this automatically.

Tailwind CSS

If a component requires Tailwind, make sure your content globs cover the install directory. See the Tailwind CSS guide for configuration details.