Next.js Discord

Discord Forum

react-creative-cursor and use-client component

Unanswered
Bee posted this in #help-forum
Open in Discord
BeeOP
Obligatory "thank you for reading all of this".

I've forked [react-creative-cursor](https://github.com/ehsan-shv/react-creative-cursor) in my Next project to create a video cursor [akin to this one on the framer wiki](https://cursors.framer.wiki/video). Currently an abbreviated breakdown of my files looks like this:

layout.tsx
  Nav.tsx (use client directive)
    instantiates <Cursor /> (also has a use client directive)


To put this in words, my <Nav /> component is in every page in my app. It instantiates my <Cursor /> component, which has custom hover effects based on data attributes on the elements it's hovering over. (A fade for links, that video cursor eventually on my project lists.)

I'm attaching a video of a bug I've encountered that could be related to some quirks surrounding use client or Next's <Link /> but am honestly at a loss for where to begin debugging. In steps:

1. Load new page. Cursor works as expected, and is faded on links, shows video cursor stub on project links.
2. Click new route. Cursor no longer working as expected on page, maintains state from last link clicked. Does work in the <Nav /> context, but not the page below as it did before.
3. Clicking and navigating to new routes also no longer work as expected.

Links are a factory component that chooses an <a />, a Next <Link />, or a <button /> based on props passed. Could have something to do with that implementation, potentially, but hoping someone a little more familiar with how these pieces work might have some advice for me.

0 Replies