系统环境变量(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-7.vercel.app

我检查了我的项目设置。自动公开系统环境变量。我也尝试过VERCEL_URL，但它不起作用。NEXT_PUBLIC_VERCEL_ENV工作，但VERCEL_URL不工作。你能帮我找到问题所在吗？

Answer 1

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

解决方法是创建一个具有以下内容的.env.local文件：

NEXT_PUBLIC_VERCEL_ENV="development"