vanta icon indicating copy to clipboard operation
vanta copied to clipboard

about its use in combination with Next.js

Open kleisberg opened this issue 1 year ago • 4 comments

hello i tried to use it with Next.js , but I couldn't get it to work. is there an example piece of code available?

kleisberg avatar Jul 24 '23 19:07 kleisberg

The backgrounds that use Three should have the same process as using React.

Regarding the backgrounds that use p5, I was able to use it in Next by following the same steps as React, but with some minor changes.

  • First, I added "use client" to the top of the file, to indicate to Next to run the page client-sided.
  • Then, I imported the background component just created using next/dynamic, like this: const Background = dynamic(() => import("@/components/background").then(mod => mod.Background), { ssr: false }) (Make sure to change the variable name and path for your needs~~)

Hope this brings you success, I struggled with this problem too 😅

33tm avatar Aug 01 '23 04:08 33tm

@treetreet0rrm0uth Do you have a working example like a repo/jsfiddle or similar? I believe I want to use NET or WAVES as the background in root layout. Would be greatly appreciated 😄

LB22 avatar Aug 17 '23 12:08 LB22

  • const Background = dynamic(() => import("@/components/background").then(mod => mod.Background), { ssr: false })

Do you have an example? I deal with [VANTA] Init error TypeError: T is undefined after following your steps.

s-alad avatar Feb 04 '24 06:02 s-alad

@treetreet0rrm0uth Do you have a working example like a repo/jsfiddle or similar? I believe I want to use NET or WAVES as the background in root layout. Would be greatly appreciated 😄

I absolutely agree. there is a small documentation for react but it would be nice to create a documentation for next.js as well.

umutkamanoglu avatar Jul 25 '24 18:07 umutkamanoglu