Next.js Discord

Discord Forum

NEXT_PUBLIC_VERCEL_BRANCH_URL not available

Unanswered
Eastern yellowjacket posted this in #help-forum
Open in Discord
Avatar
Eastern yellowjacketOP
I need to now the branch URL in the frontend (I'm using Next with the app router). The docs say that there should be NEXT_PUBLIC_VERCEL_BRANCH_URL (https://vercel.com/docs/concepts/projects/environment-variables/system-environment-variables#framework-environment-variables), but it's not showing up for me. VERCEL_BRANCH_URL does work fine.

Here's what I'm doing to test this:

export default function Page() {
  return (
    <div>
      <div>server: {process.env.VERCEL_BRANCH_URL}</div>
      <div>client: {process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}</div>
    </div>
  )
}


And then create a github pull request with this, and accessing the deploy preview. The server: has the correct url, but client: has nothing

8 Replies

Avatar
Rafael Almeida
these prefixed variables are only available during build time, and won't be added to the bundle automatically. you need to add the following to your next.config.js file so they are added to the bundle:
const nextConfig = {
  env: {
    NEXT_PUBLIC_VERCEL_BRANCH_URL: process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
  }
}
Avatar
Eastern yellowjacketOP
Thanks for the quick response! However, even with this config, NEXT_PUBLIC_VERCEL_BRANCH_URL doesn't show up. I'm pushing commits on the same PR, can that make a difference? Should I make a new PR for this change to take effect?

Also, since I'm using JSDoc to type nextConfig (/** @type {import('next').NextConfig} */), typescript said that env.NEXT_PUBLIC_VERCEL_BRANCH_URL has to be string, not string | undefined. I've added a disable comment for now just to test it.
Avatar
Rafael Almeida
no, I don't think this should make a difference since vercel should be already setting these variables in the PR
- maybe try adding a console.log in the next config file to make sure this value is set when the app is built
- try changing the name of the variable in the config NEXT_PUBLIC_VERCEL_BRANCH_URL to BRANCH_URL for example, then process.env.BRANCH_URL in the front-end code. maybe this is getting overriden?
Avatar
Eastern yellowjacketOP
I added a console.log to the next config:

console.log({ BRANCH_URL: process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL })


And during the build, it's logging out as undefined. Obviously, it's undefined in the frontend as well
Avatar
Eastern yellowjacketOP
ping @Rafael Almeida
Avatar
Rafael Almeida
@Eastern yellowjacket try logging VERCEL_BRANCH_URL instead of NEXT_PUBLIC_VERCEL_BRANCH_URL
Avatar
European anchovy
I am having the same issue, attempting to log NEXT_PUBLIC_VERCEL_BRANCH_URL is undefined in the build, although I am not having issues with VERCEL_BRANCH_URL