Next.js Client Components
Correctly use ShineJS in the Next.js App Router.
Example
shinejs interacts with the DOM, so use it in Client Components.
Overview
Shine Mouse Follow
"use client";
import { Shine } from "@hazya/shinejs/react";
export function MouseFollowPreview() {
return (
<div className="rounded-xl border p-6 dark:invert">
<div className="flex justify-center rounded-lg bg-white/45 p-16 shadow-inner">
<Shine
as="h2"
className="text-center text-8xl font-black text-slate-200"
options={{
light: {
intensity: 1.2,
position: "followMouse",
},
config: {
blur: 36,
opacity: 0.3,
offset: 0.08,
shadowRGB: { r: 24, g: 41, b: 71 },
},
}}
>
Shine Mouse Follow
</Shine>
</div>
</div>
);
}Basic Usage
"use client";
import { Shine } from "@hazya/shinejs/react";
export function DemoHeadline() {
return (
<Shine as="h1" options={{ light: { position: "followMouse" } }}>
Next.js + ShineJS
</Shine>
);
}Rules to follow
- Add
"use client"at the top of components that renderShineor calluseShine. - Keep static pages server-rendered, and isolate shine usage in client islands.
Server Components
Do not render Shine or call useShine in Server Components. Wrap shine behavior in a dedicated Client Component.