0

I'm using React Hooks and NextJS. I'm about to create a Navbar along with its functionality. But, by the time I'm going to refresh my page, this error is shown up.

Back when I was using this code on my React Project, it worked perfectly fine.

Can somebody help me where did it go wrong?enter image description here

I also attach my full code here: enter image description here

Agus Zohari
  • 11
  • 1
  • 2
  • nextjs doesn't let you directly manipulate the DOM.Avoid using vanilla javascript when you are using a framework – Emin TATLI Oct 17 '21 at 12:58
  • 1
    nex.js is run both on front end (in the browser) and on the server. So when it runs on server, `window` object is not defined. Also, probably in your case, a CSS media query will be more than enough. as Emin Pointed out – Shivam Jha Oct 17 '21 at 13:34

2 Answers2

1

As Shivam mentioned in comment, you cannot use window object in server. you can do following

useEffect(() => {
    if (typeof window !== "undefined") {
      window.addEventListener("resize", showButton)
    }
    return () => window.removeEventListener("resize", showButton)
  }, [showButton)
Shyam
  • 1,364
  • 7
  • 13
-1

Try this

window.addEventListener('resize', function() { console.log('addEventListener - resize'); }, true);

Muhammad Shahzad
  • 7
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 17 '21 at 13:33
  • How does this attempt to answer the question? – juliomalves Oct 18 '21 at 07:44