How do you replicate createRoot().render(<R3fComponent />) in NextJS?

[Amirjab21]

Most of the R3F examples are for Create React App - I haven't been able to transform the createRoot(document.getElementById('root')).render() functionality in NextJS.

I've tried to put it inside a useEffect, I've tried changing window to document. Can't seem to get it to work.

Any ideas on this? I'd be happy to take up this work and create some examples if someone is able to give me a pointer.

[tommhuth]

I have not found a way to get this to work in a Next setting as doing it in useEffect does not work, and I don't think it ever can considering how createRoot is meant to be used (I might be wrong on that one)?

I was trying to tree shake as much as possible in a very simple Wegbl experience that is basically a single plane geometry where everything happens in the shader and not much else (background element). When comparing the different sizes it only resulted in about a 25% reduction, from 170kb to 128kb. So I think I'm ok with sticking with Canvas.