title: How to import an object in Next.js that requires the document object?
body: <p>I have followed the instructions on this site -&gt; <a href="https://whatamesh.vercel.app/" rel="nofollow noreferrer">https://whatamesh.vercel.app/</a></p>
  <p>I am trying to get this gradient as a background on a landing page I am building in next.js, but I am getting an error(TypeError: Cannot read properties of undefined (reading 'getDeclaration')) when I run the code and view the page. Below is a simplified version of how I am trying to implement it</p>
  <pre><code>import { Gradient } from &quot;./Gradient.js&quot;;
  
      export default function LandingHero() {
      
        if (typeof window !== &quot;undefined&quot;) {
         const gradient = new Gradient();
         gradient.initGradient(&quot;#gradient-canvas&quot;)
        };
        
  
        return (
          &lt;div&gt;
           &lt;h1&gt;title&lt;/h1&gt;
  
           &lt;div className=&quot;h-screen w-screen&quot;&gt;
           &lt;canvas id=&quot;gradient-canvas&quot; data-transition-in /&gt;
          &lt;/div&gt;
  
         &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I assumed its because the document object was not ready upon loading because of ssr, so Im thinking i need to either use the useEffect hook, or dynamic loading... but I am unsure of what is going on. Am I able to use this gradient as a background without hurting the SEO of my site?</p>