title: ReferenceError: document is not defined in Next.js while working with React Aria overlays
body: <p>I'm learning Next.js for web development and I came across <a href="https://github.com/vercel/commerce" rel="noreferrer">commerce</a>, a boilerplate for e-commerce websites written in Next.js. As I was browsing through the code I found the <a href="https://github.com/vercel/commerce/blob/19621632f57d67a5675037a777bfe3374cbaaebc/components/ui/Sidebar/Sidebar.tsx#L16" rel="noreferrer"><code>Sidebar</code> component</a> which uses <a href="https://react-spectrum.adobe.com/react-aria/index.html" rel="noreferrer">React Aria</a> for creating overlays.</p>
  <p>I wanted to use this part in my own project, so wrote a <code>Overlay</code> component that also uses the <code>OverlayContainer</code> component.</p>
  <pre><code>import { useRef } from 'react';
  
  import {
      useOverlay,
      useModal,
      OverlayContainer
  } from '@react-aria/overlays';
  
  const Overlay = ({ className, children, open = false, onClose }) =&gt; {
      const ref = useRef(null);
  
      const { modalProps } = useModal();
  
      let { overlayProps } = useOverlay({ onClose: onClose, open: open, isDismissable: true }, ref);
      return (
          &lt;OverlayContainer&gt;
              &lt;div
                  {...overlayProps}
                  {...modalProps}
                  ref={ref}
              &gt;
                  {children}
              &lt;/div&gt;
          &lt;/OverlayContainer&gt;
  
      );
  };
  
  export default Overlay;
  </code></pre>
  <p>This component gets loaded in my Layout component, just as in the <a href="https://github.com/vercel/commerce/blob/master/components/core/Layout/Layout.tsx#L70" rel="noreferrer">commerce project</a>.
  However, when I try to load up the index page, it gives me the following error:</p>
  <blockquote>
  <pre><code>Server Error
  ReferenceError: document is not defined
  
  This error happened while generating the page. Any console logs will be displayed in the terminal window.
  Source
  pages/_document.tsx (90:33) @ Function.getInitialProps
  
    88 |     }
    89 | 
  &gt; 90 |     const { html, head } = await ctx.renderPage({ enhanceApp })
       |                                 ^
    91 |     const styles = [...flush()]
    92 |     return { html, head, styles }
    93 |   }
  </code></pre>
  </blockquote>
  <p>When I remove the <code>OverlayContainer</code> component, it loads all fine. I tried updating my dependencies, comparing more code to the Github repo, but nothing found so far.</p>
  <p>What's the problem here? And how could I fix it? I'm using Next 10 with React 17.0.1.</p>