Issue using environment variable in frontend

[jason-mather]

Hello, I have. React App I am deploying with Vercel. I would like to have some of my database client fields saved as environment variables. I created the environment variables in the GUI and selected “All Environments”. In my React code, if I do a console.log(process.env.NEXT_PUBLIC_SUPABASE_URL), it prints undefined. I attempted multiple redeploys to the same effect. I then modified my build command like so:

echo $NEXT_PUBLIC_SUPABASE_URL &react-scripts build

and in the build log I do see the correct URL being printed.

What am I doing wrong with accessing the environment variable in my actual app code?

Deployment URL or Custom Domain:
Environment (local, preview, production): all
Project Framework:
Build Settings:
  Framework Preset:
  Build Command (if not default): echo $NEXT_PUBLIC_SUPABASE_URL &react-scripts build
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version:
Package Manager:
Relevant Packages:

[tknickman (Thomas Knickman)]

Since you are using react-scripts in your build command, it looks like you created your app with create-react-app instead of Next.js. In order to make an environment variable available in a CRA app, it must be prefixed with REACT_APP_, and not NEXT_PUBLIC_ (docs).