title: Window is not defined in nextJS
body: <p>I am getting the error &quot;window is not defined&quot; in nextJS project. Here isMobile is storing the value that window size is less than 767.98 or not to execute the open/close hamburger menu functionality. This code was working fine in ReactJS but not working in NextJS. Please help me to figure out this issue.</p>
  <pre><code>import Link from 'next/link';
  import React, { useState, useEffect, useRef } from &quot;react&quot;;
  
  
  const Navbar = () =&gt; {
  
  
      const isMobile = window.innerWidth &lt;= 767.98;
  
      const [isMenuOpen, setIsMenuOpen] = useState(!isMobile);
      const toggle = () =&gt; isMobile &amp;&amp; setIsMenuOpen(!isMenuOpen);
      const ref = useRef()
  
      useEffect(() =&gt; {
          if (isMobile) {
            const checkIfClickedOutside = (e) =&gt; {
              if (!ref.current?.contains(e.target)) {
                setIsMenuOpen(false);
              }
            };
          
            document.addEventListener(&quot;mousedown&quot;, checkIfClickedOutside);
          
            return () =&gt; {
              // Cleanup the event listener
              document.removeEventListener(&quot;mousedown&quot;, checkIfClickedOutside);
            };
          }
        }, []);
  
  
  
  
      return (
          &lt;&gt;
              &lt;header&gt;
  
                  &lt;nav&gt;
                      &lt;div className=&quot;nav&quot;&gt;
  
                          &lt;div className=&quot;nav-brand&quot;&gt;
                              &lt;Link href=&quot;/&quot; className=&quot;text-black&quot;&gt;&lt;a&gt;Website&lt;/a&gt;&lt;/Link&gt;
                          &lt;/div&gt;
                          &lt;div ref={ref}&gt;
                              &lt;div className=&quot;toggle-icon&quot; onClick={toggle}&gt;
                                  &lt;i id=&quot;toggle-button&quot; className={isMenuOpen ? 'fas fa-times' : 'fas fa-bars'} /&gt;
                              &lt;/div&gt;
                              {isMenuOpen &amp;&amp; (
                                  &lt;div className={isMenuOpen ? &quot;nav-menu visible&quot; : &quot;nav-menu&quot;}&gt;
                                      &lt;ul className=&quot;main-menu&quot;&gt;
  
                                          &lt;li&gt;&lt;Link href=&quot;/&quot; onClick={toggle}&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/Link&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;Link href=&quot;/blog&quot; onClick={toggle}&gt;&lt;a&gt;Blog&lt;/a&gt;&lt;/Link&gt;&lt;/li&gt;
                                          &lt;li className=&quot;drp&quot;&gt;
                                              &lt;p className=&quot;dropbtn&quot;&gt;Find &lt;i className=&quot;fa-solid fa-angle-down&quot;&gt;&lt;/i&gt;&lt;/p&gt;
                                              &lt;ul className=&quot;dropdown-content&quot;&gt;
                                                  &lt;li&gt;&lt;Link href=&quot;/find/portable-keyboards&quot; onClick={toggle}&gt;&lt;a&gt;Portable Keyboards&lt;/a&gt;&lt;/Link&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                       
  
                                      &lt;/ul&gt;
                                  
                                  &lt;/div&gt;
                              )}
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
  
              &lt;/header&gt;
  
          &lt;/&gt;
      )
  }
  
  export default Navbar;
  </code></pre>