开发跨React/Next.js组件库：如何检测运行环境为Next.js？

这里有几种可靠的方式判断你的组件是否运行在Next.js环境中：

• 检查客户端全局变量window.__NEXT_DATA__
  Next.js在客户端渲染时会自动注入window.__NEXT_DATA__对象，包含页面核心数据。判断时要先确保window存在，避免服务端渲染阶段报错：

  const isNextJS = typeof window !== 'undefined' && !!window.__NEXT_DATA__;
  

• 利用Next.js专属环境变量process.env.NEXT_RUNTIME
  Next.js 12及以上版本会在运行时注入这个环境变量，服务端（值为nodejs或edge）和客户端（值为browser）都能访问。直接判断变量是否存在即可：

  const isNextJS = process.env.NEXT_RUNTIME !== undefined;
  

• 检测项目中是否安装了next包
  通过尝试解析next包的路径来判断，适合在服务端或构建阶段做检测：

  let isNextJS = false;
  try {
    require.resolve('next');
    isNextJS = true;
  } catch (e) {
    // 非Next.js环境，忽略错误
  }
  

内容的提问来源于stack exchange，提问作者Manoj Singh