create a custom hook to get dimensions from actually window in nextjs.

get-dimensions-from-window.tsx

import { useState, useEffect, ReactElement } from 'react'

// Usage

const App = (): ReactElement => {
  const size = useWindowSize()

  return <div>{size.width}</div>
}

type Dimensions = {
  width: undefined | number
  height: undefined | number
}
// Hook
export function 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<Dimensions>({
    width: undefined,
    height: undefined
  })

  function handleResize() {
    // Set window width/height to state
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    })
  }

  useEffect(() => {
    // only execute all the code below in client side
    if (typeof window !== 'undefined') {
      // Handler to call on window resize

      // 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
}

ref link.