系统环境变量 (VERCEL_URL) 不起作用

Question

我想在vercel中添加一个url条件。我用的是Next.js，代码在

下面index.tsx

const Home: NextPage = () => {
const [textEnv, setTextEnv] = useState<string>()
const [textUrl, setTextUrl] = useState<string>()
useEffect(()=>{
if(process.env.NEXT_PUBLIC_VERCEL_ENV == "development"){
setTextEnv("this is from development")
}else if(process.env.NEXT_PUBLIC_VERCEL_ENV == "production"){
setTextEnv("this is from production")
}else if(process.env.NEXT_PUBLIC_VERCEL_ENV == "preview"){
setTextEnv("this is from preview")
}else{
setTextEnv("nothing else")
}
if(process.env.NEXT_PUBLIC_VERCEL_URL === "vercel-env-test-seven.vercel.app"){
setTextUrl("this the url what I look for")
}else{
setTextUrl("other urls")
}
},[])
return (
<div>
<Box display="flex" flexDirection="column">
<Text>Type of Environment</Text>
<Text>{textEnv}</Text>
<Text>Name of the URL: </Text>
<Text>{textUrl}</Text>
</Box>
</div>
)
}

结果页面:vercel-env-test-seven.vercel.app

我检查了我的项目设置。勾选"自动公开系统环境变量"。我也只尝试了VERCEL_URL，但它不起作用。NEXT_PUBLIC_VERCEL_ENV工作，但VERCEL_URL不工作。你能告诉我问题出在哪里吗?

Answer 1

据我所知，您需要添加"NEXT_PUBLIC_"定义环境变量时，前缀，以便在浏览器中可用。系统环境变量是预定义的，这意味着它们在浏览器中不可用。不知道为什么没有一个文档提到这一点。

一个解决方法是创建一个.env.local文件，包含以下内容:

NEXT_PUBLIC_VERCEL_ENV ="development"