In my simple weather application I have several components where I fetch data from external API. While working on localhost I had no problems, kept NEXT_PUBLIC_API_KEY=my-key in a hidden .env.local file and grabbed it using process.env.NEXT_PUBLIC_API_KEY.
Then I deployed it on Vercel and created an environmental variable called API_KEY and used it. I wrote process.env.API_KEY everywhere where it is needed.
I have tried to follow a few suggestions that I have found on the internet, but nothing seemed to fix it for me. Keep getting undefined instead of the key.
If I fetch data in several components, some of which are client components, does it make a difference?

I have tried different variable names, including using process.env.NEXT_PUBLIC_API_KEY to access variable from Vercel. The last one worked, but of course the api key is visible to everyone.