Hi Vercel team,
We’re currently deploying a Next.js app with preview environments on Vercel and ran into an issue with the VERCEL_URL environment variable. Our build step runs on GitHub Actions, (remotely deployed with vercel deploy --prebuilt). not on Vercel directly.
Our goal is to compute the application’s BASE_URL at build time, but we noticed that: • VERCEL_URL is not available during the build step at all for deployments happening outside of Vercel. (contrary to what is said here -- likely the docs should be updated) • It only becomes available at runtime (e.g., inside API routes or serverless functions). • This breaks our logic that needs the base preview URL to be known during static generation (e.g., for SEO, OG tags, etc).
We’re aware that: • The preview URL is generated on Vercel's side after the build finishes. • Therefore, it can’t be injected during the build step by default.
However, this makes it impossible to reference the actual URL in places like:
export const metadata: Metadata = { previewImageUrl: `${getBaseUrl()}/preview-image.png`};We are utilizing a function like this to get the baseUrl:
const getBaseUrl = () => { if (typeof window !== 'undefined') { return window.location.origin; }
if (process.env.VERCEL) { // env.VERCEL is truthy for builds with 'vercel build' even outside of vercel (like GH actions)
if (process.env.NEXT_PUBLIC_ALIAS_URL) { // production/staging urls we have custom set. return `https://${process.env.NEXT_PUBLIC_ALIAS_URL}`; // (also available at build time) } if (process.env.VERCEL_URL) { return `https://${process.env.VERCEL_URL}`; // (not available at build time if built outside of vercel like GH actions) } // TODO: Find a way to get the base url for preview builds } return `http://localhost:${process.env.PORT ?? 3000}`;};How can we access the base url of preview environments at build time if the build is not happening at Vercel?
