对于这种情况，Next.js具有动态导入功能。

对于包含只在浏览器中工作的库的模块，建议使用动态导入。请参考

对于Next.js 12.1.0版本，我发现我们可以使用process。标题，以确定我们是在浏览器中还是在节点端。希望能有所帮助!

export default function Projects(props) {
    console.log({ 'process?.title': process?.title });

    return (
        <div></div>
    );
}

1. 从终端，我接收{'进程?。标题':'节点'}

2. 从Chrome devtool，我建议{'进程?。Title: 'browser'}

在刷新页面时，我也遇到了同样的问题(由于导入与SSR不能很好地工作)。

对我来说，固定它的是去发生这种情况的页面，并迫使导入是动态的:

import dynamic from 'next/dynamic';


const SomeComponent = dynamic(()=>{return import('../Components/SomeComponent')}, {ssr: false});

//import SomeComponent from '../Components/SomeComponent'

注释掉原始导入并动态导入组件将强制组件的客户端呈现。

动态导入在Nextjs的文档中有介绍: https://nextjs.org/docs/advanced-features/dynamic-import

我通过观看youtube视频找到了这个解决方案: https://www.youtube.com/watch?v=DA0ie1RPP6g

componentWillMount()生命周期钩子在服务器端和客户端都可以工作。在您的情况下，服务器在页面服务期间不知道窗口或文档，建议将代码移动到任何一个

解决方案1:

componentDidMount()

或者，方案2

如果它是你只想执行的东西，那么你可以这样写:

componentWillMount() {
    if (typeof window !== 'undefined') {
        console.log('window.innerHeight', window.innerHeight);
    }
}

全球吗?。window && window. innerheight

使用运算符很重要。，否则构建命令可能会崩溃。

我想把我觉得有趣的方法留给未来的研究人员。它使用了一个自定义钩子useEventListener，可以用于许多其他需求。

请注意，您需要对最初发布的内容进行一些更改，就像我在这里建议的那样。

所以它会像这样结束:

import { useRef, useEffect } from 'react'

export const useEventListener = (eventName, handler, element) => {
  const savedHandler = useRef()

  useEffect(() => {
    savedHandler.current = handler
  }, [handler])

  useEffect(() => {
    element = !element ? window : element
    const isSupported = element && element.addEventListener
    if (!isSupported) return

    const eventListener = (event) => savedHandler.current(event)

    element.addEventListener(eventName, eventListener)

    return () => {
      element.removeEventListener(eventName, eventListener)
    }
  }, [eventName, element])
}