Javascript 在Next.js中根据屏幕大小呈现不同的组件

我正在尝试根据屏幕宽度<768p的情况以不同的方式渲染组件

如果低于768p，则加载汉堡包菜单。如果没有，请加载整个菜单

这是我使用的代码。问题是，当页面第一次加载时，我无法观察到更改。但是当我把浏览器屏幕变小，然后增加到原来的大小；效果会发生

我认为这是因为React被呈现在服务器端。但是我仍然不明白为什么它会通过把屏幕变小然后再变大来工作

import "twin.macro"
import { Global, css } from "@emotion/core"

import { useState, useEffect } from "react"

const Navbar = () => {
  const useWindowDimensions = () => {
    const hasWindow = typeof window !== "undefined"

    function getWindowDimensions() {
      const width = hasWindow ? window.innerWidth : null
      const height = hasWindow ? window.innerHeight : null
      return {
        width,
        height,
      }
    }

    const [windowDimensions, setWindowDimensions] = useState(
      getWindowDimensions()
    )

    useEffect(() => {
      if (hasWindow) {
        function handleResize() {
          setWindowDimensions(getWindowDimensions())
        }

        window.addEventListener("resize", handleResize)
        return () => window.removeEventListener("resize", handleResize)
      }
    }, [hasWindow])

    return windowDimensions
  }

  const { height, width } = useWindowDimensions()
  const breakpoint = 768

  return (
    <div>
      {width <= breakpoint ? (
        <div>
          <HamburgerMenu />
        </div>
      ) : (
        <div>
           <FullMenu />
        </div>
  )
}

export default Navbar

导入“twin.macro”
从“@emotion/core”导入{Global，css}
从“react”导入{useState，useEffect}
常量导航栏=（）=>{
常量useWindowDimensions=（）=>{
const hasWindow=窗口类型！=“未定义”
函数getWindowDimensions（）{
常量宽度=hasWindow？window.innerWidth:空
常量高度=hasWindow？window.innerHeight:null
返回{
宽度
身高
}
}
常量[windowDimensions，setWindowDimensions]=useState(
getWindowDimensions（）
)
useffect（（）=>{
如果（窗口）{
函数handleResize（）{
setWindowDimensions（getWindowDimensions（））
}
window.addEventListener（“调整大小”，handleResize）
return（）=>window.removeEventListener（“resize”，handleResize）
}
}，[hasWindow]）
返回窗口尺寸
}
常量{height，width}=useWindowDimensions（）
常量断点=768
返回(
{widthNext.js是通用的，这意味着它首先在服务器端执行代码，然后在客户端执行代码。窗口对象只在客户端显示

因此，它第一次无法访问
窗口
，因此
窗口维度
的值为
空

当您调整大小时，更改状态使应用程序重新呈现，使其成为客户端呈现=>您可以访问窗口，然后您的代码工作
是否有任何方法可以强制页面在第一次加载时呈现？