Passing env variables from docker-compose.yml to the client-side Next.js

Question

This is quite silly, but I can't successfully pass my environment vars into my Next.js service (run with docker-compose up ). Anyone can see the bug?

docker-compose.yml

services:
  ...
  nextjs-client:
    image: nextjs-client
    ports: "3000:3000"
    environment:
      - NEXT_PUBLIC_API_HOST=192.168.0.9:8080

At my nextjs-client sourcecode I try to access it with process.env.NEXT_PUBLIC_API_HOST , but it's undefined .

Answer 1

Your syntax looks fine, Try to exec the container and printenv to see if the variable exists.

No need to say, your code should run in the same container, of course.

If it exists, maybe a spelling issue. Check also the process.env declaration vs the docker environment declaration.

Try also to docker-compose down to remove the container, might be also a caching issue.

It might be easier to maintain the environment variables with.env file and docker compose --env-file.env , but it is not the problem, just a tip.