How to access Next.js environment variables in a deployed environment?

Question

Question: I am currently running a Next.js frontend on localhost:3000. I have set the environment variables API_BASE_URL, CLIENT_ID and CLIENT_SECRET in my .env.local file, and I am able to access them on my local server. However, when I deploy to production, the base URL is being overwritten by the production environment, even though I declared the environment variables in Azure before deploying. How can I access my environment variables in a deployed environment?