Search code examples
node.jsnext.jsenvironment-variablesvercel

How to manage process.env.NODE_ENV on Vercel

I have a Next Js app on Vercel and I've set various environment variables related to the database, etc, both for development and for production. All these variables work.

But I can't figure out how I can use the process.env.NODE_ENV that I use in local env in the dev build. For example, if I want to change the text logo in dev it doesn't work (in local yes, but on Vercel no)

<span>{process.env.NODE_ENV === "development" ? `${siteConfig.name} DEV` : siteConfig.name}</span>

I set the dev branch for preview. enter image description here

I also tried to set these variables in this way, but of course, it doesn't work enter image description here

Is that the correct way to approach this thing? How can I change, for example, the ui based on the environment? Thanks

Solution

  • Running next build sets NODE_ENV=production automatically.

    Since both Production and Preview deployments on Vercel run next build, they both set NODE_ENV=production automatically because next build performs production optimizations, one of those is ensuring React uses the production version.

    I suggest using a different env var name for your use case such as SITE_NAME=Dev. Then you can write your code like the following:

    <span>{process.env.SITE_NAME || siteConfig.name}</span>