How to manage process.env.NODE_ENV on Vercel

Question

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.

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

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

Answer 1

Vercel docs state:

If the environment variable NODE_ENV is unassigned, Next.js automatically assigns development when running the next dev command, or production for all other commands.

In your case, consider avoiding the use of NODE_ENV entirely and instead use Vercel System Variables; particularly VERCEL_ENV which tells you the Vercel Environment that the app is deployed and running on.

Answer 2

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>