I have a NEXT_PUBLIC environment variable in my NextJS application. It has been set in my .env.local file and working correctly but after it has been deployed to Azure App Service the app is unable to read it. It is 'undefined'. I have configured it under Configuration for the App Service.
Any advice on what the issue might be?
Thanks in advance.
I had the same problem that the NEXT_PUBLIC environment variables on my Azure AppService always had the value "undefined", although they were defined as environment variables in the AppService settings.
When building the Docker image, the NEXT_PUBLIC environment variables are set directly during the build and cannot be overwritten afterwards. This was the reason why the settings from the AppService for the NEXT_PUBLIC did not work.
The following solution by Renato Pozzi (dev.to) helped me.
Here are my steps: (next v.12.2.5):
a) Create the desired NEXT_PUBLIC variable in the Dockerfile before the "build" process start and fill it with a "placeholder value".
RUN NEXT_PUBLIC_API_URL=PLACEHOLDER_NEXT_PUBLIC_API_URL yarn build
b) Create an entrypoint file (entrypoint.sh) which replaces the placeholder value with real environment variables from the AppService when the Docker image start.
In my example, the placeholder "PLACEHOLDER_NEXT_PUBLIC_API_URL" is replaced with the real value "NEXT_PUBLIC_API_URL" from the AppService configurations (environment variables).
#!/bin/sh
test -n "$NEXT_PUBLIC_API_URL"
find /app/.next \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#PLACEHOLDER_NEXT_PUBLIC_API_URL#$NEXT_PUBLIC_API_URL#g"
exec "$@"
c) Make the previously created entry point file known in the Dockerfile.
COPY --chown=nextjs:nodejs entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]
CMD ["node", "server.js"]
I also ran into this issue, and Paul is right. You need to set the variables during build time. I'm running a CICD github action for deployment and this solved it:
- name: Create .env.local file
run: echo "NEXT_PUBLIC_MY_KEY=${{ secrets.NEXT_PUBLIC_MY_KEY }}" > .env.local
From the nextjs docs, environment variables in .env.local will take precedence:
If you are using the Github actions to deploy the image
- name: Create .env file
uses: SpicyPizza/[email protected]
with:
envkey_NEXT_PUBLIC_GOOGLE_API_KEY: ${{ env.NEXT_PUBLIC_GOOGLE_API_KEY }}
envkey_NEXT_PUBLIC_BACKEND_URL: ${{ env.NEXT_PUBLIC_BACKEND_URL }}
file_name: .env
- name: Build and Push to ACR
uses: docker/build-push-action@v2
with:
push: true
tags: ${{ env.ACR_LOGIN_SERVER }}/test:latest
file: Dockerfile
context: .
context: . is required; otherwise, the .env file won't be copied into the docker image.
