title: error - ReferenceError: document is not defined NextJS
body: <p>I'm getting an error message like this</p>
  <p><strong>error - ReferenceError: document is not defined</strong></p>
  <p>Why is this? I've never had an error like this so I'm really confused.
  Please help for the seniors there.</p>
  <p>My code =</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import dynamic from 'next/dynamic';
  import { Quill } from &quot;react-quill&quot;;
  const ReactQuill = dynamic(() =&gt; import(&quot;react-quill&quot;), { ssr: false });
  import toolbarOptions from &quot;./toolbar&quot;;
  
  import 'react-quill/dist/quill.bubble.css';
  const BubbleTheme = Quill.import(&quot;themes/bubble&quot;);
  
  class ExtendBubbleTheme extends BubbleTheme {
    constructor(quill, options) {
      super(quill, options);
  
      quill.on(&quot;selection-change&quot;, (range) =&gt; {
        if (range) {
          quill.theme.tooltip.show();
          quill.theme.tooltip.position(quill.getBounds(range));
        }
      });
    }
  }
  
  Quill.register(&quot;themes/bubble&quot;, ExtendBubbleTheme);
  
  import styles from '../styles/Home.module.css'
  
  export default function Home() {
    return (
      &lt;div className={styles.container}&gt;
        &lt;h1&gt;Quill Editor&lt;/h1&gt;
          &lt;ReactQuill
            theme=&quot;bubble&quot;
            placeholder=&quot;Compose an epic...&quot;
            modules={{ toolbar: toolbarOptions }}
          /&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>