How to get the current URL / domain

[IRediTOTO]

Hi, I am trying to setup SEO for site. It will need a full URL like : https://mysite.com/product/a-product
But how can we get value mysite.com?
I am use env file, it work but If we have 2 domains point to Vercel, this can't work...
The VERCEL_URL return an URL like this my-site-7q03y4pi5.vercel.app not mysite.com

[Prottoy2938]

Maybe use something like: process.env.VERCEL_URL, which will give https://mysite.com. You can trim it from there.

More info here: https://vercel.com/docs/environment-variables

[zhenghaohe]

hi a quick question - did you need to create a local file for process.env?

[samlak]

Yes, you will need to create a local .env to access process.env.VERCEL_URL on your local setup

[Sammeeey]

process.env.VERCEL_URL doesn't give the custom URL but the generated deployment URL as described in System Environment Variables

[brunos3d]

I created a repository to debug the env vars of the Next hosted on Vercel, and this is still a current problem...

https://vevd.vercel.app/

Note that VERCEL_URL and NEXT_PUBLIC_VERCEL_URL are the same as the deploy url (vercel-env-vars-debug-brobnyiz1-txt.vercel.app) and that at no time does the application url (vevd.vercel.app) appear in the list.

[brunos3d]

In my development environment (.env.local file) I chose to add an environment variable pointing to http://localhost:3000

[atawfique21]

To avoid this problem I chose to create a new environment variable with different values for each environment / branch.

To everyone in the future looking at this thread:
Do not set these env variables in Project Settings. This is the wrong approach to this problem and will lead to a frustrating time debugging.

Instead, create (or add to existing) .env.local file at the root directory and add this:
NEXT_PUBLIC_VERCEL_URL=http://localhost:3000

And for your production, you'll want to add another file called .env.production at the root directory and add this code:
NEXT_PUBLIC_VERCEL_URL=${VERCEL_URL}

And in your client code, you can now reference this such as:
https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api/get-profiles
(Keep in mind, process.env.NEXT_PUBLIC_VERCEL_URL does not return http:// or https:// so you must deal with that yourself -- still researching how to do that as localhost:3000 is http:// and production is https://

[joelbiffin]

If you're working with a setup of HTTP for Development locally and HTTPS for Vercel deployments you could always add some DEVELOPMENT flag to your yarn dev script. Then in the code you could check for that variable being present/true.

[WebDev-Akhil]

Instead, create (or add to existing) .env.local file at the root directory and add this:
NEXT_PUBLIC_VERCEL_URL=http://localhost:3000

And for your production, you'll want to add another file called .env.production at the root directory and add this code:
NEXT_PUBLIC_VERCEL_URL=${VERCEL_URL}

Hey @atawfique21

I did the same as you suggested and now the localhost and preview deployment URLs (git branch pushes) are working fine but I figured out that the production URL given by vercel is not working (returning my app's 404 page). so to fix this I added a production env variable as the below image in project settings.

After that, my vercel-given app URL (i.e. appname.vercel.app) is running fine but still the main branch deployment URLs and two other production domains given by vercel are not working (red font URLs in the below img). so any thoughts on how to make them work?

where +1 is a modal popup with the URL is appname-git-main-appname.vercel.app

[Sammeeey]

Defining NEXT_PUBLIC_SITE_URL in .env-files for the different environments is the best approach from my point of view.

Custom Domains

However if you are working with custom domains in your project, I don't see a way to fetch the custom domain from Vercel.
As @brunos3d mentioned: Vercel only gives you the deploy URL (e.g. vercel-env-vars-debug-brobnyiz1-txt.vercel.app).

If you want to access the domain name here's what you can do:

env.development:

NEXT_PUBLIC_SITE_URL=http://localhost:3000

env.production:

NEXT_PUBLIC_SITE_URL=https://www.custom-domain.com  # just an example - exact structure depends on your needs

Then you can access it in your Next.js (I'm on version 14.0.3) project like so:

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL

I used this approach to get the correct site URL in production in order to generate sitemaps with the right domain name.

Hint: NEXT_PUBLIC_SITE_URL is neither a system variable nor a framework variable for Next.js but a custom bundled environment variable (which you can define yourself as a public variable)

[vvo]

To anyone coming here to know how to have an env variable of NEXT_PUBLIC_URL containing:

• http://localhost:3000 in development
• https://project-vercelslug.vercel.app in preview
• https://yourdomain.com in production

Here's how to do it "the right way" as of September 2021.

For development:

# .env.development
NEXT_PUBLIC_URL=http://localhost:3000

For preview URLs:

# .env.production
NEXT_PUBLIC_URL=https://$NEXT_PUBLIC_VERCEL_URL

⚠️ Make sure to auto expose system env variables in Vercel env variable admin:

For production (yourdomain.com), create a new env variable on the Vercel dashboard, only for the production env:

I wish this were easier, and we could define the main domain for a project exposed in a different env variable. Cc @leerob maybe for feedback. Thanks!

Bonus: If you want to override the development defaults, use .env.local and set it to whatever you want.

[thevinci]

I spent HOURS looking for this. I am going to murder someone. WHY IS THIS NOT IN THE OFFICIAL DOCS?

[diveddie]

Confirming this works for me as well. Thanks for posting.

[jacob-leger]

That solution works well, but I don't like so many .env files, and when using the T3 stack with ENVThing, things can get messy. That is why I prefer this simple approach:

// src/app/lib/utils/getUrl.ts
const BASE_URL =
  process.env.NODE_ENV === "production"
    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
    : "http://localhost:3000";

const INCLUDES_FORWARD_SLASH_AT_START_REGEX = /^\/(.|\n)*$/;
const INCLUDES_FORWARD_SLASH_AT_START = (string: string) =>
  INCLUDES_FORWARD_SLASH_AT_START_REGEX.test(string);

const getUrl = (path: string) =>
  `${BASE_URL}${!INCLUDES_FORWARD_SLASH_AT_START(path) ? "/" : ""}${path}`;

export default getUrl;
export {
  BASE_URL,
  INCLUDES_FORWARD_SLASH_AT_START_REGEX,
  INCLUDES_FORWARD_SLASH_AT_START,
};

You can use it like this:

const THING_URL = getUrl("/my-path/thing.txt");

Let me know if there are any problems with this code

[Code-Victor]

Does this work with Vite?👀

[leog]

Couldn't make it work. Having dotenv-extend in next.config.ts and env var in Vercel project settings using $VERCEL_GIT_COMMIT_REF and it stays with that string. Can't believe there is no straightforward way to do this from Vercel itself.

[balazsorban44]

currently leading to issues on auto-detecting the Vercel environment in NextAuth.js

nextauthjs/next-auth#3419

[akshay-nm]

Would this work?

// in some util
export const getBaseUrl = () => {
  if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production")
    return "https://your-production.url";
  if (process.env.NEXT_PUBLIC_VERCEL_ENV === "preview")
    return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
  return "http://localhost:3000";
};

[jinsley8]

Vercel automatically exposes VERCEL_URL and NEXT_PUBLIC_VERCEL_URL to your deployments so you should only need to check if it's development.

VERCEL_URL will automatically use the URL for the production and preview deployments.

export const getBaseUrl = () => {
  if (process.env.NODE_ENV === "development") {
    return `${process.env.NEXT_PUBLIC_SITE_URL}`
  }
  
  return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
};

NEXT_PUBLIC_SITE_URL or whatever you want would be set to http://localhost:3000 on local only.

[WebDev-Akhil]

VERCEL_URL will automatically use the URL for the production and preview deployments

In my case, Vercel is exposing VERCEL_URL (or, NEXT_PUBLIC_VERCEL_URL) only for the preview deployments (eg. my-site-7q03y4pi5.vercel.app) and is returning my app's 404-page for production URL (eg. mysite.vercel.app).

So, to solve this, I tried adding mysite.vercel.app as the production URL env variable in project settings which fixes the production URL 404 page issue but then returns the preview deployments with a 404 page

[y-nk]

adding on the code-based solution:

export function getBaseUrl() {
  return process.env.NEXT_PUBLIC_SITE_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL
};

Priority on environment variable, fallback to vercel's exposed url.

[dn-l]

[curiosbasant]

window.location.origin

[crisu83]

This actually works for all environments, local and Vercel (with a small tweak):

function getBaseUrl() {
  return typeof window !== "undefined" ? window.location.origin : "";
}

[landsman]

I been struging with the same thing, because const requestUrl = new URL(request.url); was returning internal localhost url of docker container.

My fix:

Set env variable process.env.NEXT_PUBLIC_SITE_URL in GitHub action build, infrastructure (AWS task definition)

next.config.js

function getBaseUrl() {
  const custom = process.env.NEXT_PUBLIC_SITE_URL;
  const vercel = process.env.NEXT_PUBLIC_VERCEL_URL;
  
  if (custom) {
    return custom;
  } else if (vercel) {
    return vercel;
  } else {
    return 'http://localhost:3000';
  }
}

/** @type {PublicRuntimeConfig} */
const publicEnv = {
  BASE_URL: getBaseUrl(),
  // etc...
};

/** @type {CustomNextConfig} */
const nextConfig = {
  env: publicEnv,
  // etc...
}

build-url.ts

import getConfig from "next/config";

/**
 * public facing URL including https://
 */
export const buildUrl = (path: string): string => {
  const { env } = getConfig();
  return env.BASE_URL + path;
}

usage

  return NextResponse.json({
    redirectTo: buildUrl("/hello"),
  });

[dradovic]

In order to have the deployment URL at build-time, both locally in development mode, and when built locally, and in preview-mode pointing to the dynamic Vercel deployment, and pointing to the custom domain when deployed in production, I've resorted to use:

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 is the simplest solution I've found.

[juliankoehn]

Hey,

we are using the following implementation:

const VERCEL_URL = process.env.NEXT_PUBLIC_VERCEL_URL
  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
  : "";
const RAILWAY_STATIC_URL = process.env.RAILWAY_STATIC_URL
  ? `https://${process.env.RAILWAY_STATIC_URL}`
  : "";
const HEROKU_URL = process.env.HEROKU_APP_NAME
  ? `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`
  : "";
const RENDER_URL = process.env.RENDER_EXTERNAL_URL
  ? `https://${process.env.RENDER_EXTERNAL_URL}`
  : "";

export const WEBAPP_URL =
  process.env.NEXT_PUBLIC_WEBAPP_URL ||
  VERCEL_URL ||
  RAILWAY_STATIC_URL ||
  HEROKU_URL ||
  RENDER_URL ||
  "http://localhost:3000";

In the local environment is should fallback to "http://localhost:3000" - for vercel pr deployments it will use VERCEL_URL, when you set NEXT_PUBLIC_WEBAPP_URL to production-only.

[jacob-leger]

Idk if I'm js dumb, but what's a railway URL, is that some sort of hosting service?

[juliankoehn]

yes, railway is just like heroku - you can take a look at their features here:

• https://railway.app/features
• https://docs.railway.app/maturity/compliance

[jacob-leger]

Thx

[eddyhdzg-solarx]

I still can't get the current URL (Custom Domain, Branch Link, Deployment Link). I don't want to hardcode the URL.

[maxijonson]

I also wanted to share my way of getting the base URL in my NextJS projects, because while some of the above solutions solve most of my requirements, there are some cases where it wasn't sufficient.

My problem

I have a production custom domain (main branch) and a staging custom domain (develop branch), which is effectively a preview deployment. I wanted my getBaseUrl function to return:

1. My custom domain on main (https://www.example.com)
2. My custom domain on develop (https://staging.example.com)
3. Vercel's URL for other preview builds (https://example-5i49zd11d-example.vercel.app)
4. http://localhost:3000 on my local machine

The main issue the other solutions don't solve for me are for 2 and 3. Since develop is treated as a preview deployment, I can't just use process.env.NEXT_PUBLIC_VERCEL_URL whenever process.env.NEXT_PUBLIC_VERCEL_ENV === "preview".

Solutions

The following solutions can be used regardless of where you need the baseURL (client, server and even SSG). However, none of them account for multi-custom-domain deployments, which I'll explain below.

Using process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF

This is the method I ended up using. NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF will be the name of the branch the deployment is on. So main, develop or feature/some-feature-branch.

export const getBaseURL = () => {
  // Client
  if (typeof window !== "undefined") {
    // This will always be accurate
    return new URL("/", window.location.origin);
  }

  // Server and SSG
  if (process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF === "develop") {
    return new URL("https://staging.example.com");
  }
  if (process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF === "main") {
    return new URL("https://www.example.com");
  }
  if (process.env.NEXT_PUBLIC_VERCEL_URL) {
    return new URL(`https://${process.env.NEXT_PUBLIC_VERCEL_URL}`);
  }
  return new URL(`http://localhost:3000`);
};

Notice I didn't even need to use process.env.NEXT_PUBLIC_VERCEL_ENV at all. If it's not develop or main, the only other kind of deployments possible are preview or development. Only preview builds will have NEXT_PUBLIC_VERCEL_URL set, so it's safe to assume that if it is set, then it's a preview build that should use the Vercel URL.. Otherwise, it's necessarily a development build, so localhost:3000 should be used.

Using custom environment variables

I won't go too much into details, because this comment is already good, but the only tweak you'd have to do to make a staging custom domain work is to add a NEXT_PUBLIC_URL specifically to the develop preview environment.

export const getBaseURL = () => {
  // Client
  if (typeof window !== "undefined") {
    // This will always be the most accurate
    return new URL("/", window.location.origin);
  }

  // Server and SSG
  if (process.env.NEXT_PUBLIC_URL) {
    return new URL(process.env.NEXT_PUBLIC_URL);
  }
  return new URL(`http://localhost:3000`);
};

Caveat

The only problem that none of the above solutions or mine can solve is to infer the base URL for a deployment that has multiple domains assigned to it. For example, if your production deployment is assigned to:

• www.example.com
• prod.example.com
• www.placeholder.com

Then you cannot use any of the methods that bases itself on ANY environment variable (whether it's a custom env or a system env), because environment variables are unique per deployment, not per domain. Unless Vercel were to somehow allow you to set environment variables per domain (which I don't even think is technically possible), there's (almost) nothing you can do. You need to choose which single domain will take priority and be used across all other domains (e.g: www.example.com).

I say there's almost nothing you can do, because you technically can do a little more, but you'll likely stumble on even weirder issues with it. You can use next/headers to get the host directly from the request headers. I strongly recommend you DO NOT use this solution

export const getBaseURL = async () => {
  // Client
  if (typeof window !== "undefined") {
    return new URL("/", window.location.origin);
  }

  // Server
  try {
    const { headers } = await import("next/headers");
    const headersObj = Object.fromEntries(headers());
    return new URL(
      headersObj["x-forwarded-proto"] + "://" + headersObj["x-forwarded-host"],
    );
  } catch {}

  // Fallback for SSG, you may use a custom env instead (Solution no. 2)
  if (process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF === "develop") {
    return new URL("https://staging.example.com");
  }
  if (process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF === "main") {
    return new URL("https://www.example.com");
  }
  if (process.env.NEXT_PUBLIC_VERCEL_URL) {
    return new URL(`https://${process.env.NEXT_PUBLIC_VERCEL_URL}`);
  }
  return new URL(`http://localhost:3000`);
};

Note that getBaseURL is now async, but that's only because I wanted to show that one function can be used for all environments (client, server and SSG). Since next/headers can appear as an import client-side or at SSG time, we need to import it asynchronously. Even if you splitted it in two separate files, one for client-side and one for server-side, you'd still get an error at build time when SSG runs your server-side components.

If needing to await your getBaseUrl calls is not enough to disuade you, just know this workaround will opt a lot of pages that used to be static into dynamic rendering, which I personally find is the dealbreaker when it comes to it.

[leerob]

Have you explored using VERCEL_PROJECT_PRODUCTION_URL?

https://vercel.com/docs/projects/environment-variables/system-environment-variables#system-environment-variables

[subproject22]

@leerob if I use VERCEL_PROJECT_PRODUCTION_URL and have custom domain then it show custom domain even on *.vercel.app (a static one, not per commit) deployments. How do I access *.vercel.app URL then?

[amyegan]

Yes, VERCEL_PROJECT_PRODUCTION_URL always gives you a custom domain if one is set on the project because that's what most people prefer to use.

VERCEL_BRANCH_URL gives you the generated Git branch URL, which is more stable and predictable than the unique deployment URL. This is relative to the current deployment and not always a production address.

VERCEL_URL would give you the generated deployment URL that's different for every deployment. This is also relative to the current deployment and not always a production address.

[jonahallibone]

Why is there not a variable for assigned branch URLs though? If there was a way to populate an envvar with the assigned branch domain, i think a lot of this would be simplified.

[jonahallibone]

The generated variables are useful but only on preview deployments. If I have an assigned URL I'd almost always want to use that, but as far as i can tell that's almost impossible to retrieve?

[nathanredblur]

:/ is not like this?

in vercel just set NEXT_PUBLIC_SITE_URL for production.

in local/development you set

NEXT_PUBLIC_SITE_URL=http://localhost:8080

in your code you check

const domain = process.env.NEXT_PUBLIC_SITE_URL || `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;

This should work because only production or local you will use NEXT_PUBLIC_SITE_URL for previews, that not exist, so will use https://${process.env.NEXT_PUBLIC_VERCEL_URL}

[petedegraw]

Vercel should provide an example in their docs on how to achieve this for common use cases... meta tags, favicon, sitemaps, etc.

[pawlean]

Hi, @petedegraw!

We just published this post in the Vercel Community. Does this help? Feel free to leave feedback directly there 😄

[petedegraw]

Hi @pawlean, honestly, not totally sure - I'd have to build an app to see it all work. It looks like just one more of many ways to solve this.

To put some more context into the nature of this issue for anyone looking to learn about the gotchas of "Preview URL variables" and URLs...

The Vercel generated preview URL assigned to the NEXT_PUBLIC_VERCEL_URL (automatically, not manually set) for a Preview environment (feature branch) doesn't match any of the domains Vercel provides in the dashboard.

Let's say you've used NEXT_PUBLIC_VERCEL_URL for the hostname in the web app... things like favicons, manifest files, sitemaps, RSS feed links, maybe images, and more are broken if you share the Dashboard URLs for a build. Things are not broken if you view the source code and find the place NEXT_PUBLIC_VERCEL_URL was used and share that URL.

The Dashboard URLs

1. https://<my-repo-name>-<truncated-branch-name>.vercel.app
2. https://<my-repo-name>-<commit-hash?>.vercel.app

The NEXT_PUBLIC_VERCEL_URL variable shows

• https://<my-repo-name>-<some-other-commit-hash?>.vercel.app

If anyone wanted to test this to build docs for it, build a Next.js app and demonstrate how to use the correct hostname from a environment variable for common head tags and images with absolute URLs (e.g., like in RSS feeds).