Invalid environment variable on client

[mammutserver]

I am using t3-env in my create-t3-app project and defined a public environment variable. It works in dev mode on my laptop but in production (Docker container) I get an error in my browser console saying that the environment variable is invalid. It is defined in the .env file on the server and there are no startup errors etc..

Node: v22.12.0
@t3-oss/env-nextjs: v0.10.1

env.js

import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    AUTH_SECRET:
      process.env.NODE_ENV === "production"
        ? z.string()
        : z.string().optional(),
    AUTH_AUTHENTIK_CLIENT_ID: z.string(),
    AUTH_AUTHENTIK_CLIENT_SECRET: z.string(),
    AUTH_AUTHENTIK_ISSUER: z.string(),
    DATABASE_URL: z.string().url(),
    NODE_ENV: z
      .enum(["development", "test", "production"])
      .default("development"),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    // NEXT_PUBLIC_CLIENTVAR: z.string(),
    NEXT_PUBLIC_LINK_BASE_URL: z.string(),
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    AUTH_SECRET: process.env.AUTH_SECRET,
    AUTH_AUTHENTIK_CLIENT_ID: process.env.AUTH_AUTHENTIK_CLIENT_ID,
    AUTH_AUTHENTIK_CLIENT_SECRET: process.env.AUTH_AUTHENTIK_CLIENT_SECRET,
    AUTH_AUTHENTIK_ISSUER: process.env.AUTH_AUTHENTIK_ISSUER,
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_LINK_BASE_URL: process.env.NEXT_PUBLIC_LINK_BASE_URL,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
   * useful for Docker builds.
   */
  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
  /**
   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
   * `SOME_VAR=''` will throw an error.
   */
  emptyStringAsUndefined: true,
});

CopyButton.tsx

<CopyButton value={`${env.NEXT_PUBLIC_LINK_BASE_URL}/l/${link.shortUrl}`}>
  {({ copied, copy }) => (
    <ActionIcon onClick={copy}>
      {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
    </ActionIcon>
  )}
</CopyButton>;

Browser console output

[ywwa]

bump

same issue with 0.11 and 0.12

[ywwa]

UPD: seems to be working as indented after taking deeper look at docs
public environment variables get hardcoded on build

@mammutserver

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