Nextjs 项目如何检测当前运行环境是在客户端还是在服务器？

在Next.js中，您可以通过检查window对象是否存在来确定当前的代码是在服务器端还是客户端运行。window对象是浏览器环境的全局对象，它在服务器端是不存在的。因此，您可以通过尝试访问window来决定当前的代码执行环境。

以下是一个如何检测的例子：

javascript
const isClientSide = () => {
  return typeof window !== 'undefined';
};

const isServerSide = () => {
  return typeof window === 'undefined';
};

您可以在您的组件或者函数内部使用这些辅助函数来确定执行环境。例如：

javascript
function MyComponent() {
  if (isClientSide()) {
    // 客户端特定的代码
    console.log("这段代码在客户端运行");
  }

  if (isServerSide()) {
    // 服务器端特定的代码
    console.log("这段代码在服务器端运行");
  }

  // ...
}

需要注意的是，Next.js 支持服务器端渲染（SSR）和静态站点生成（SSG），因此组件的生命周期函数（如getServerSideProps，getStaticProps等）肯定是在服务器端执行的。而 useEffect钩子函数里面的代码，以及组件渲染的大部分逻辑，则在客户端执行。

始终要小心处理服务器端和客户端代码，因为在服务器端使用任何客户端特有的API（如window或document）都会导致错误。同样地，如果你在服务器端执行了本应只在客户端执行的代码，也可能会有未预期的后果。

由于我不喜欢依赖奇怪的第三方事物来实现这种行为（尽管process.browser似乎来自_Webpack_），所以我认为首选的检查方法是检查是否存在appContext.ctx.req这样的情况：

shell
async getInitialProps (appContext) {

    if (appContext.ctx.req) // server? 
    {
        //server stuff
    }
    else {
        // client stuff
    }
}

来源： https: //github.com/zeit/next.js/issues/2946