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）都会导致错误。同样地，如果你在服务器端执行了本应只在客户端执行的代码，也可能会有未预期的后果。

现在（2020 年 1 月）应该是这样，typeof window === 'undefined'因为process.browser已弃用

参考https://github.com/zeit/next.js/issues/5354#issuecomment-520305040

您可以用来process.browser区分服务器环境（NodeJS）和客户端环境（浏览器）。

process.browser位于true客户端和undefined服务器端。

由于我不喜欢依赖奇怪的第三方事物来实现这种行为（尽管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

另一项注意事项是componentDidMount()始终在浏览器上调用。我经常加载初始数据集（seo 内容）getInitialProps()，然后在方法中加载更深入的数据 componentDidMount()。

另外，作为变体，您可以将变量添加到.env文件中而不带NEXT_PUBLIC_前缀。

就像： IS_SERVER_FLAG=true

该变量仅在服务器端可用

之后，您可以在代码中检查它

const isServer = process.env.IS_SERVER_FLAG ? 'RUN ON SERVER' : 'RUN_ON_CLIENT'