System env vars not getting set in Turborepo Next deployments

Help
1

Hi, scratching my head a bit.

Building out based on the Vercel Turborepo Next template. I have a few custome environment variable and want to make use of the system ones like VERVEL_URL etc.

I have a .env.local file for local dev, and setting the vars in the Dashboard for deployed envs.
Disable and re-enabled the “Automatically expose System Environment Variables”

The build log was Warning that the envs were not allows in turborepo so added them to the "globalEnv" array. Warnings now gone. But vars still not showing up in the deployed build.

I’ve set up some console logs which work locally.
But deployed they return undefined

// turbo.json
{
  "$schema": "https://turborepo.com/schema.json",
  "ui": "tui",
  "globalEnv": [
    "VERCEL_URL",
    "VERCEL_ENV",
    "VERCEL_BRANCH_URL",
    "STYTCH_PROJECT_ID",
    "STYTCH_PUBLIC_TOKEN"
  ],
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": [".next/**", "!.next/cache/**"],
       // are these needed?
      "env": [
        "VERCEL_URL",
        "VERCEL_ENV",
        "VERCEL_BRANCH_URL",
        "STYTCH_PROJECT_ID",
        "STYTCH_PUBLIC_TOKEN"
      ]
    },

// .env.local
# General vars
NEXT_PUBLIC_BASE_URL=http://localhost:3001

# Stytch Auth
# The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard
NEXT_PUBLIC_STYTCH_PROJECT_ENV=test
NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=public-token-test-xxxxxxxxxxxxxxx
...

Lib function to return the base URL


export function getBaseUrl(): string {
  console.log("process.env.VERCEL_URL", process.env.VERCEL_URL);
  console.log(
    "process.env.NEXT_PUBLIC_BASE_URL",
    process.env.NEXT_PUBLIC_BASE_URL,
  );
  console.log("process.env.VERCEL_ENV", process.env.VERCEL_ENV);
  console.log("process.env.VERCEL_BRANCH_URL", process.env.VERCEL_BRANCH_URL);

  // cats

  if (process.env.VERCEL_BRANCH_URL) {
    return `https://${process.env.VERCEL_BRANCH_URL}`;
  }

  if (process.env.VERCEL_URL) {
    return `https://${process.env.VERCEL_URL}`;
  }

  return process.env.NEXT_PUBLIC_BASE_URL || "";
}

Deployed, check console: https://member-git-basic-partner-dash-onfire-health.vercel.app/login
“next”: “^15.3.0”,
“react”: “^19.1.0”,
“turbo”: “^2.5.4”,
“node”: “>=18”
“packageManager”: “bun@1.2.18”,

3

Edit:

Using the AI bot on the help page I dropped in this post.

I mentioned that I need to expose the system vars with NEXT_PUBLIC_*
Kinda makes sense but confusing as this is not mentioned in the docs and the setting above literally says Automatically expose System Environment Variables

image
image1840×540 17.8 KB

This just results in the ${VERCEL_URL} geting logged, the variable does not resolve

image
image832×234 11.8 KB

This seems a basic requirement. What am I missing?

4

Ah thanks for sharing the fix

There are two separate concerns here

  • Vercel exposes those system environment variables to the running application
  • Next.js keeps all environment variables server only and only sends down those explicitly marked NEXT_PUBLIC

So even if the Vercel docs say Vercel exposes those, you could be running any app or framework and it’s up to that app to decide what it sends to users

5

It’s still not working for me.

I’m not sure what the syntax is supposed to be to “pass” the VRECEL_* through from the dashboard

All result in un resolved vars:

image
image828×208 11 KB

Global Var is getting silly but trying everything.

 "globalEnv": [
    "VERCEL_URL",
    "VERCEL_ENV",
    "VERCEL_BRANCH_URL",
    "NEXT_PUBLIC_VERCEL_URL",
    "NEXT_PUBLIC_VERCEL_ENV",
    "NEXT_PUBLIC_VERCEL_BRANCH_URL",
    "NEXT_PUBLIC_BASE_URL",
    "STYTCH_SECRET",
    "STYTCH_PROJECT_ID",
    "STYTCH_PUBLIC_TOKEN"
  ],
6

Ok finally solved. As per the AI help instruction I was over writing the NEXT_PUBLIC_* values in the dashboard. Cleared out those and the values came through from the system vars