I have a project, to which it is built and pushed to a docker container registry. On my VPS, I pull the image and environment variables are provided to my container, which works fine. However, I noticed that it appears nextjs does not use these variables. It appears variables were provided to NextJS strictly at build time? However, I will deploy this application in multiple ways, with different environment variables. I need these environment variables to be able to be set when the container is ran, not during the build process. What can I do?
#How to provide environment variables after container is built?
elfin rune
astral scaffoldBOT
Hi @elfin rune. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Next.js indeed bundles environment variables at build time, especially those prefixed with NEXT_PUBLIC_. This means that once your app is built, it will no longer respond to changes to these environment variables. If you need access to runtime environment values, you'll have to set up your own API to provide them to the client (either on demand or during initialization) source (https://github.com/vercel/next.js/issues/51575).
However, when deploying your Next.js application to Vercel, you can configure Environment Variables in the Project Settings. All types of Environment Variables should be configured there. If you've configured Development Environment Variables, you can pull them into a .env.local for usage on your local machine using the following command: vercel env pull .env.local. Note that your environment variables in .env* files will not be made available to Edge Runtime, unless their names are prefixed with NEXT_PUBLIC_. It's recommended to manage your environment variables in Project Settings instead, from where all environment variables are available source (https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#environment-variables-on-vercel).
For Docker, using environment variables is not different from other deployment methods. You can check out this guide (https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser) on how to configure environment variables and this example (https://github.com/vercel/next.js/tree/canary/examples/with-docker) on how to set up Docker with Next.js source (https://github.com/vercel/next.js/issues/51575).
If you're still having trouble, ensure that after adding a new Environment Variable, you have redeployed your application. Environment Variables are made available to the app on each deployment. If you attempt to read an Environment Variable that was added after the deployment was made, its value will be undefined source (https://vercel.com/guides/how-to-add-vercel-environment-variables).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
elfin rune
@astral scaffold so basically, if I have public and private environment variables, I must provide them all at build time??? I am not using vercel, nor will I use it. I need to be able to provide environment variables when I run the contianer, not when I build it.
astral scaffoldBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, environment variables that are prefixed with NEXT_PUBLIC_ are inlined at build time and can be used in the browser. However, non-prefixed environment variables are only available in the Node.js environment, meaning they aren't accessible to the browser source (https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser).
If you need to use environment variables at runtime, you have a few options:
-
API Routes or
getServerSideProps: These are executed at runtime and can read environment variables from theglobal.process.env.*object source (https://github.com/vercel/next.js/issues/39299). -
Docker Build Arguments: You can pass environment variables as Docker build arguments and then define them as environment variables in your Dockerfile. Here's an example:
ARG API_URL_1
ENV API_URL_1=${API_URL_1}
And then build the Docker image with the --build-arg option:
docker build --build-arg API_URL_1=<https://...> -t nextjs-standalone-envvar-bug:latest .
Then, in your Next.js code, you can access the environment variable using global.process.env.API_URL_1 source (https://github.com/vercel/next.js/issues/46296).