How to detect window size in Next.js SSR using react hook?

You can avoid calling your detection function in ssr by adding this code:

// make sure your function is being called in client side onlyif (typeof window !== 'undefined') {  // detect window screen width function}

full example from your link:

import { useState, useEffect } from 'react';// Usagefunction App() {  const size = useWindowSize();  return (    <div>      {size.width}px / {size.height}px    </div>  );}// Hookfunction useWindowSize() {  // Initialize state with undefined width/height so server and client renders match  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/  const [windowSize, setWindowSize] = useState({    width: undefined,    height: undefined,  });  useEffect(() => {    // only execute all the code below in client side    if (typeof window !== 'undefined') {      // Handler to call on window resize      function handleResize() {        // Set window width/height to state        setWindowSize({          width: window.innerWidth,          height: window.innerHeight,        });      }          // Add event listener      window.addEventListener("resize", handleResize);           // Call handler right away so state gets updated with initial window size      handleResize();          // Remove event listener on cleanup      return () => window.removeEventListener("resize", handleResize);    }  }, []); // Empty array ensures that effect is only run on mount  return windowSize;}

While Darryl RN has provided an absolutely correct answer. I'd like to make a small remark: You don't really need to check for the existence of the window object inside useEffect because useEffect only runs client-side and never server-side, and the window object is always available on the client-side.

useEffect(()=> {   window.addEventListener('resize', ()=> {       console.log(window.innerHeight, window.innerWidth)   })}, [])