title: Why is there a ReferenceError: window is not defined in Nextjs
body: <p>I am trying to use a <code>useState</code> hook with the <code>window</code> property in Nextjs. However, I am getting the error, <code> ReferenceError: window is not defined</code>.</p>
  <p><strong>The goal</strong>: update the size state whenever the screen size changes</p>
  <p><strong>Implementation</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>import { useState } from 'react'
  
  export const Dashboard = ({ children }) =&gt; {
  
    const [size, setSize] = useState(window.innerWidth) // &lt;&lt;&lt; Error thrown here
    const updateSize = () =&gt; setSize(window.innerWidth)
    useEffect(() =&gt; (window.onresize = updateSize))
  }
  
  return {
    &lt;div className=`{$toggleMenu || size &gt;= 768 ? 'flex' : 'hidden'}`}&gt;content&lt;/div&gt;
  }
  </code></pre>
  <p>I've tried placing the <code>useState</code> in a conditional and useEffect hook, but this does not fix the issue.</p>