Next.js

Using Vector Vesper components with the Next.js App Router.

Vector Vesper components work with the Next.js App Router.

Client boundaries & Server Components

Every component is authored with "use client" at the top. You can safely import them into Server Component layouts or pages:

// app/page.tsx (Server Component)
import ScrollHighlighter from "@/components/vv/scroll-highlighter";

export default function Page() {
  return (
    <main>
      <h1>Server-rendered Page Header</h1>
      <ScrollHighlighter text="Client-animated highlight effect" />
    </main>
  );
}

Next.js automatically treats the imported component as a Client Boundary, keeping the parent page server-rendered.

WebGL components need `ssr: false`

Three.js and WebGL components (such as magnetic-sand, glass-gallery, or code-rain) interact directly with the DOM canvas and browser WebGL contexts. They should not be evaluated during server rendering.

Wrap them with next/dynamic and { ssr: false }, in a Client Component. Next.js does not allow ssr: false in a Server Component:

"use client";

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 exact snippet whenever you add a WebGL-powered component.

Static exports & Server Actions

  • Static HTML Exports (output: "export"): Components work with static Next.js exports, since animations run on the client after mount.
  • Server Actions: You can trigger Server Actions from any interactive component event handler (e.g. on click, drag, or transition finish) just like any standard React component.

Where files land

With the default alias @/components/vv:

  • Project with src/ directory → src/components/vv/<slug>/
  • Project without src/ directory → components/vv/<slug>/

npx vectorvesper init detects your project layout automatically.

Tailwind CSS

If an installed component uses Tailwind classes, ensure your Tailwind configuration scans the installation directory. See the Tailwind CSS guide for details.