Somewhat unfamiliar ground for me, but I'm trying to set a banner on my page that says "Current Env: REVIEW" or "Current Env: STAGING" depending on what phase of my deployment process I'm on in Heroku.

Currently, I have environment variables on Heroku like this: CURRENT_ENV: REVIEW. However, when I try to access the variables with the logic below, they come up as undefined in my deployed app. I'm curious what the proper approach is to get these variables set up correctly so my app has the ability to detect whether it's in review or staging.

_app.ts

  const getCurrentEnv = (): string => {
    console.log(process.env.NEXT_PUBLIC_CURRENT_ENV, process.env.CURRENT_ENV);
    // while deployed on heroku logs: PRODUCTION, undefined

    return process.env.NEXT_PUBLIC_CURRENT_ENV === 'DEVELOPMENT'
      ? process.env.NEXT_PUBLIC_CURRENT_ENV
      : process.env.CURRENT_ENV;
  };

.env.production

NEXT_PUBLIC_CURRENT_ENV="PRODUCTION"

.env.development

NEXT_PUBLIC_CURRENT_ENV="DEVELOPMENT"