I can't pass env variables at runtime for next.js app router.

[vihsonic]

I am trying to containerize my next.js app to deploy to the docker hub.

I managed to build a docker image and push it to the docker hub but I can't pass the custom env file at runtime.

I think it is really tricky to pass client-side env variables at runtime.

I already researched previous approaches but couldn't find the solution for the latest next.js version.

I have over 20 client-side env variables.

next.js version: ^14.2.8
node package manager: npm

[icyJoseph]

Yeah, NEXT_PUBLIC_ prefixed env vars are inlined at build time...

• https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser

After being built, your app will no longer respond to changes to these environment variables. For instance, if you use a Heroku pipeline to promote slugs built in one environment to another environment, or if you build and deploy a single Docker image to multiple environments, all NEXT_PUBLIC_ variables will be frozen with the value evaluated at build time, so these values need to be set appropriately when the project is built. If you need access to runtime environment values, you'll have to setup your own API to provide them to the client (either on demand or during initialization).

Maybe do that, or give this a try: https://www.npmjs.com/package/next-runtime-env

[vihsonic]

@icyJoseph Thanks for your answer, could you please share some git repos that I can refer to if you might have?