Closed NickToye closed 3 years ago
This package should work with NextJS as it should support server-side rendering as I wrote the code to handle being in a NodeJS environment as well
Ok, well it must be something my end then, I just wanted to check.
If there's an error just let me know what it is, maybe I can help or maybe it is the library. I don't believe I've had any official projects use NextJS with this package so it very well could be a small detail I overlooked
Well I don't get any errors. The css seems to load and the classes change the body, so activating the modal freezes the body, but nothing gets injected into the modal-root element, which I found strange because I had a previous modal written using context hooks and that injected it fine. So I don't really have much to go on.
Did you give the modal-root element the id of modal-root? (Sorry power went out here for a while, wasn't able to respond sooner)
Hi Chris,
Sorry for the delay in responding, but I moved onto a completely new project and my focus left me for a while on this.
So I've picked it up again and I thought it would be easier if I created a Next project and install your package. You can see this here.
https://github.com/NickToye/modal-test
Thanks
Nick
@NickToye, your test-modal project isn't working as expected because you have #modal-root
inside of #__next
.
What you have:
<html>
<body>
<div id="__next">
<div class="Home">
<!-- your page content -->
<div id="modal-root"></div>
</div>
</div>
</body>
</html>
What you want is:
<html>
<body>
<div id="__next">
<div class="Home">
<!-- your page content -->
</div>
</div>
<div id="modal-root"></div>
</body>
</html>
#modal-root
at the base of the <body>
in NextYou will need to create a file called "_document.js" in your pages directory — ./pages/_document.js
. From there you have to create a custom class that extends Next's Document
class. Inside that class you must have a render function that returns several things like so:
import Document, {Html, Head, Main, NextScript} from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return {...initialProps}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<div id="modal-root"></div>
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Ok, I'm fairly new at this Next JS stuff, thanks for that I will give it a go.
Before I dive down the rabbit hole, is this modal compatible with Next JS? I had a play with the example modals and although something is happening, classes being added etc... Nothing is being added into modal-root via portals.
Now I know the portals work because I had a basic modal using simple hooks and that worked.