Next.js application not reading environment variables from Azure App Application Settings - azure

Question

I am trying to deploy a Next.js application to Azure and I am noticing that the application is not reading from the Application Settings environment variables when I run the application. For example, I created a simple variable called "NEXT_PUBLIC_AZURE_ENV" in the Azure Application Settings.
It seems like from the documentation on Next.js that the environment variables are set at build time.
Our DevOps team is trying to leverage a build once; deploy anywhere approach and having the application read from the Application Settings is what we are trying to do.
Here is the variables declared locally in the local .env file:
Here is the next.js.config file, which I added to the env section, not sure if that is needed or not.
When I print the variable out, it works:
However, once the application is deployed to Azure; the variable to is not being read.
Is it possible to read from Application Settings in Azure from Next.js? Thank you!

Answer 1

To access front-end env variables from an Azure Static app, you need add the env variables inside of your job configuration. For Azure Pipelines, the relevant part should look like:
...
inputs:
app_location: 'src'
api_location: 'api'
output_location: 'public'
azure_static_web_apps_api_token: $(deployment_token)
env: # Add environment variables here
HUGO_VERSION: 0.58.0
For Github Actions:
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: 'src'
api_location: 'api'
output_location: 'public'
env: # Add environment variables here
HUGO_VERSION: 0.58.0
Examples taken from: https://learn.microsoft.com/en-gb/azure/static-web-apps/build-configuration?tabs=github-actions#environment-variables