How can I disable scrolling when there's a modal using nextjs tailwind?

Question

I currently have this code set up but I don't think this is the correct one to use as it gives me "document is not defined".

export default function Modal() {
  const [modal, setModal] = useState(false);

  const toggleModal = () => {
    setModal(!modal);
  };

//   BELOW IS THE ERROR

  if (modal) {
    document.body.classList.add('active-modal');
  } else {
    document.body.classList.remove('active-modal');
  }

Answer 1

I didn't test the result but try to write the if statement inside useEffect() hook. I think initially the document object is unknown to nextJs same goes for the global window object!

For side-effects always try to use useEffect() hook. useEffect() runs after the component is mounted on the DOM.