title: NextJS - ReferrenceError: document is not defined
body: <p>I'm running NextJS v11.1.12, and am trying to run a standard Vanilla JS function that toggles the CSS class of the div with the class &quot;state-select-dropdown-box&quot;. My code is:</p>
  <pre><code>const Header = () =&gt; {
  
  const dropDownMenu = document.querySelector('state-select-dropdown-box');
  console.log(dropDownMenu);
  
  function toggleMenu() {
      dropDownMenu.classList.toggle('show');
  }
  
  return ( &lt;Component /&gt; );
  }
  </code></pre>
  <p>When the app compiles, I get &quot;Referrence Error: document is not defined&quot;. What's weird is I have got these functions running earlier today with no issues whatsoever and not changing a thing.</p>
  <p>After some mass Googling and research, I've come to the conclusion that maybe I'm just not understanding how SSR works in NextJS? Could anyone explain or shine some light on why I'm not achieving the results that I'm expecting and how this can be solved?</p>