Vercel - VERCEL_URL showing development URL instead of production URL?

Question

Deployed my application to Vercel. Filled in all the required ENV variables including the VERCEL_URL which equal to the production URL of my application. But on console log, it keeps showing the wrong URL and returns the development URL instead.

Trying to debug this for hours but it's confusing. ENV variables from the Vercel settings are correct.

Any tips?

Answer 1

You shouldn't try to override VERCEL_ env vars as they will be set by the Vercel CI and take precedence over yours.

Instead, use something like:

export function getBaseUrl() {
  return process.env.VERCEL_ENV === "production"
    ? `https://www.my-custom-domain.com`
    : process.env.VERCEL_URL
    ? `https://${process.env.VERCEL_URL}`
    : `http://localhost:3000`;
}

This will give you access to the base URL during building:

• locally in development mode: localhost
• locally built: localhost
• deployed in preview: the dynamic Vercel deployment URL
• deployed into production: your hard-coded custom domain