Next.js Discord

Discord Forum

Environment variables returning undefined in prod

Answered
Silver cyprinid posted this in #help-forum
Open in Discord
Silver cyprinidOP
Hello.
Most of my environment variables, or at least all prefixed with ⁨NEXT_PUBLIC_⁩ return ⁨undefined⁩ in production.

For context, I build my app with docker, and the built app is shoved into a docker image. I cannot be passing arguments in CI as that would just be unwise and stupid.

How can I resolve this issue?
Answered by B33fb0n3
the .env file can be commited, yea. But DONT commit your .env.local or any secrets. Place your secrets into .env.local and the public ones in .env.

You may already read this: https://nextjs.org/docs/app/guides/environment-variables#environment-variable-load-order
View full answer

13 Replies

@B33fb0n3 can you share your docker compose and you Dockerfile?
Silver cyprinidOP
Of course!
@B33fb0n3 can you share your docker compose and you Dockerfile?
Silver cyprinidOP
# Compose
services:
  verification:
    image: # image name
    tty: true
    stdin_open: true
    environment:
      NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
      NEXT_PUBLIC_DISCORD_CLIENT_ID: ${NEXT_PUBLIC_DISCORD_CLIENT_ID}
      DISCORD_CLIENT_SECRET: ${DISCORD_CLIENT_SECRET}
      NEXT_PUBLIC_SENTRY_DSN: ${NEXT_PUBLIC_SENTRY_DSN}
    networks:
      - traefik
    deploy:
      update_config:
        parallelism: 1
      replicas: 1
      labels:
        # traefik labels, likely unrelated

networks:
  traefik:
    external: true


FROM oven/bun:1 AS base
WORKDIR /usr/src/app

# Hot reload
FROM base AS hot
VOLUME /usr/src/app

COPY package.json bun.lock tsconfig.json ./

RUN bun install --frozen-lockfile

COPY public ./public
COPY src ./src
COPY sentry.edge.config.ts sentry.server.config.ts next.config.ts postcss.config.mjs components.json ./

EXPOSE 3000
ENV NODE_ENV=development

CMD ["bun", "dev"]

# Build image for prod
FROM base AS build

COPY package.json bun.lock tsconfig.json ./
RUN apt-get update
RUN apt-get install ca-certificates -y

RUN bun install --frozen-lockfile

ARG VERSION
ARG COMMIT_SHA

ENV NEXT_PUBLIC_APP_VERSION=${VERSION:-latest}
ENV NEXT_PUBLIC_COMMIT_SHA=${COMMIT_SHA:-localbuild}

COPY src ./src
COPY public ./public
COPY sentry.edge.config.ts sentry.server.config.ts next.config.ts postcss.config.mjs components.json ./

RUN --mount=type=secret,id=SENTRY_AUTH_TOKEN \
    SENTRY_AUTH_TOKEN="$(cat /run/secrets/SENTRY_AUTH_TOKEN)" \
    VERSION="${VERSION:-latest}" \
    bun run build

# Run prod image
FROM build AS prod
WORKDIR /usr/src/app
ARG VERSION

COPY --from=build /usr/src/app/package.json ./
COPY --from=build /usr/src/app/.next ./.next
COPY --from=build /usr/src/app/public ./public

EXPOSE 3000
ENV NODE_ENV=production
CMD ["bun", "run", "start"]
as your variables are public, you can place them directly in your project at ⁨.env⁩. Then in your Dockerfile copy the .env file to your image, so its there as well. Then nextjs can access all variables
@Silver cyprinid Are you.. suggesting I should commit the .env file..?
the .env file can be commited, yea. But DONT commit your .env.local or any secrets. Place your secrets into .env.local and the public ones in .env.

You may already read this: https://nextjs.org/docs/app/guides/environment-variables#environment-variable-load-order
Answer
Silver cyprinidOP
Is there no way to make next listen to the runtime variables for both the public and private ones
@Silver cyprinid Is there no way to make next listen to the runtime variables for both the public and private ones
iirc docker will automatically place them in the resulting .env file. But that still means, that you need to copy it over
@Flemish Giant Use a .gitignore for that.
yes, in the default nextjs project its already pre configured, that .env files can be committed, while .env.local can't
Sun bear
Just pass --env-file when spinning up docker compose. Docker compose loads env inside containers only when the env vars are available. If the env is just in .env file you'll have to explicitly pass when using docker compose or even reference the file in compose file.
@Silver cyprinid solved?
@B33fb0n3 <@1344176447551574078> solved?
Silver cyprinidOP
Ya!