NEXT_PUBLIC_VERCEL_BRANCH_URL not available
Unanswered
Eastern yellowjacket posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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:
And then create a github pull request with this, and accessing the deploy preview. The
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 nothing8 Replies
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
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](https://cdn.discordapp.com/embed/avatars/0.png)
Eastern yellowjacketOP
Thanks for the quick response! However, even with this config,
Also, since I'm using JSDoc to type
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](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
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
- try changing the name of the variable in the config
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](https://cdn.discordapp.com/embed/avatars/0.png)
Eastern yellowjacketOP
I added a
And during the build, it's logging out as
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](https://cdn.discordapp.com/embed/avatars/0.png)
Eastern yellowjacketOP
ping @Rafael Almeida
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
@Eastern yellowjacket try logging
VERCEL_BRANCH_URL
instead of NEXT_PUBLIC_VERCEL_BRANCH_URL
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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