如何添加仅在开发环境生效的className？Vercel环境判断方法

你可以通过两种可靠方式判断环境，从而给body添加仅开发环境生效的类名：

方法1：利用Vercel自动注入的环境变量 #

Vercel会自动为项目设置VERCEL_ENV环境变量，对应不同运行状态：

• development：本地开发（通过vercel dev启动）
• production：正式生产部署
• preview：预览部署（如PR预览分支）

示例代码（React/Next.js通用） #

// 优先通过环境变量判断，兼容本地直接启动的场景
const isDev = process.env.VERCEL_ENV === 'development' || window.location.hostname === 'localhost';

<body className={`${isDev ? 'debug-screens' : ''}`}>

注意：如果是Next.js等SSR框架，要让客户端能读取VERCEL_ENV，需在项目根目录的.env文件中添加：NEXT_PUBLIC_VERCEL_ENV=$VERCEL_ENV，确保环境变量暴露到客户端。

方法2：直接判断当前宿主地址 #

如果不想依赖环境变量，可通过浏览器的window.location直接判断本地环境：

const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';

<body className={`${isDev ? 'debug-screens' : ''}`}>

这个方法无需额外配置，适合纯前端项目或本地直接启动的场景。

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