如何在Next.js中仅在npm run dev环境显示调试组件？

Next.js/React确实有类似C语言#ifdef DEBUG的机制，核心是通过环境变量做条件判断，下面是几种实用的实现方式：

• 用Next.js内置的NODE_ENV变量
  Next.js会自动根据运行模式设置process.env.NODE_ENV：执行npm run dev时它是development，执行npm run build后是production。直接用这个变量做条件渲染就行：

{process.env.NODE_ENV === 'development' && <Component />}

生产构建时，Next.js会通过Tree Shaking自动移除这部分死代码，不会把调试组件打包到生产产物里。

• 自定义调试开关（可选）
  如果需要更灵活的控制，比如临时在生产环境开启调试，可以在.env.development文件里加自定义变量：

NEXT_PUBLIC_DEBUG_MODE=true

然后在组件里判断：

{process.env.NEXT_PUBLIC_DEBUG_MODE === 'true' && <Component />}

注意变量名要加NEXT_PUBLIC_前缀，这样才能在客户端组件中访问到。生产环境只要不设置这个变量，或者设为false，组件就不会渲染。

• 抽离判断逻辑（优化写法）
  把环境判断抽成一个变量，让代码更清晰：

const isDev = process.env.NODE_ENV === 'development';

// 组件中使用
{isDev && <Component />}

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