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.

[rennehir]

Is this approach not working anymore or am I doing something wrong? 🤔

In a deployment preview the NEXT_PUBLIC_URL is the literal string $NEXT_PUBLIC_VERCEL_URL. And when I try to use it in the code, e.g. for setting the canonical url this is what I get: <link rel="canonical" href="https://$NEXT_PUBLIC_VERCEL_URL/">.

Do I need to escape the value somehow maybe? I have set the environment variable in the project settings like this:

I also tried setting the variable to https://${NEXT_PUBLIC_VERCEL_URL} but no results.

EDIT:

Managed to solve this for myself by using dotenv-expand in next.config.js

Example:

const dotenvExpand = require("dotenv-expand");

dotenvExpand.expand({ parsed: { ...process.env } });

/**
 * @type {import('next').NextConfig}
 */
module.exports = {
  // Your config
};

[TheYass1n]

this worked for me, thank you

[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.

[Leiloukou]

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

[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.

[Leiloukou]

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

[Leiloukou]

Thx