Orbit Controls didn't work on NextJS but works on regular React

[ArgeekBrambo]

First Im building this with NextJS, everything was fine until we implement orbit controls. Been searching for hours but I didn't get any solution. Then I start anew with regular react and the orbit controls work fine. Why is that ? and how to fix it for NextJS ?

[getFrontend]

Don't forget the client side and server side using Next, and then I'm sure you'll find a solution 😉

[ArgeekBrambo]

Thanks for the reply.

I already use "client side", but still won't work. Haven't found any solution tho

[getFrontend]

in Figma clone on Next JS was the same problem. To resolve it: we disable ssr to avoid pre-rendering issues of Next.js because we're using a canvas element that can't be pre-rendered by Next.js on the server.

page.tsx

import dynamic from "next/dynamic";

const App = dynamic(() => import("./App"), { ssr: false });

export default App;

app.tsx

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

[EssiJunior]

in Figma clone on Next JS was the same problem. To resolve it: we disable ssr to avoid pre-rendering issues of Next.js because we're using a canvas element that can't be pre-rendered by Next.js on the server.

page.tsx

import dynamic from "next/dynamic";

const App = dynamic(() => import("./App"), { ssr: false });

export default App;

app.tsx

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

I'm also implementing this tutorial with Next.js.

The VideoCarroussel component wasn't working till I applied this. Thanks.