Is there a way to have an "escape route" in Next to use regular React just for a single component?

[cassidoo]

I want to illustrate a concept in React and then bring it back to Next. I start with something basic like:

const reactElement = <div>Heyooooooo</div>
const domElement = document.getElementById("__next") // or 'root' or whatever

ReactDOM.render(reactElement, domElement)

...then I explain how React.createElement works, and then I implement a fake version of useState and try to trigger re-renders.
Is there a way to do this on just a page or component in a Next.js project, or should I just have a separate React project that shows this and come back to Next later?

[jamesmosier]

Hi @cassidoo! So ideally in this example you'd be mounting your root component using ReactDOM? Kinda like a self-contained React app on a single page? If so I know there is no API that Next exposes for something like that currently (as it is all abstracted away) and things get tricky using ReactDOM and attaching to elements because everything is either pre-rendered or server rendered so then you are battling the lack of document/window

[cassidoo]

Yes that's exactly what I'm trying to do! Hmm good to know though. Might have to make a separate React project then. Thanks @jamesmosier :)