Environment Variables Undefined on Client Side in Next.js Deployed on Azure
Unanswered
Swainson's Warbler posted this in #help-forum
Swainson's WarblerOP
I'm deploying my Next.js application on Azure using the Node 20-lts runtime stack. My app leverages both server-side rendering (SSR) and client-side rendering (CSR).
Here's what I'm experiencing:
Server-Side: Environment variables (e.g., process.env.NEXT_PUBLIC_API_BASE_URL and process.env.NEXT_PUBLIC_BASE_URL) are correctly injected and work as expected.
Client-Side: These same environment variables come up as undefined when accessed from client-side code.
I have checked that the environment variables are correctly prefixed with NEXT_PUBLIC_.
Locally (using .env.local), everything works fine, and both SSR and CSR have access to the correct values.
On Azure, while the SSR part receives the correct environment variables, the client-side bundle ends up with them as undefined
My azure app runtime stack is Node 20.9.0 and I have tried multiple things to make this work. Anyone have any suggestions on what could be the issue?
Here's what I'm experiencing:
Server-Side: Environment variables (e.g., process.env.NEXT_PUBLIC_API_BASE_URL and process.env.NEXT_PUBLIC_BASE_URL) are correctly injected and work as expected.
Client-Side: These same environment variables come up as undefined when accessed from client-side code.
I have checked that the environment variables are correctly prefixed with NEXT_PUBLIC_.
Locally (using .env.local), everything works fine, and both SSR and CSR have access to the correct values.
On Azure, while the SSR part receives the correct environment variables, the client-side bundle ends up with them as undefined
My azure app runtime stack is Node 20.9.0 and I have tried multiple things to make this work. Anyone have any suggestions on what could be the issue?