NEXT_PUBLIC_VERCEL_URL for auto deploy on Vercel

[paqstd-dev]

Summary

Hello, I don't understand how can I use NEXT_PUBLIC_VERCEL_URL in my application? The documentation states that this variable is automatically available. However, I am getting undefined in the browser.

I also tried specifying next.config.js as env, but that doesn't work either:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  output: 'standalone',
  swcMinify: true,
  env: {
    NEXT_PUBLIC_VERCEL_URL: process.env.VERCEL_URL,
  },
}

module.exports = nextConfig

In my code it works only for server rendering, but "undefined" type for client:

// configs/index.ts
export const VERCEL_URL = process.env.VERCEL_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL

I also tried to specify in .env.production. In such a case, I get an empty string "" instead of the expected VERCEL_URL:

# .env.production
NEXT_PUBLIC_VERCEL_URL=${VERCEL_URL}

Ideally, I would like to automatically receive the current url both on the server and on the client, without manually specifying this information somewhere.

Now for deployment, I manually execute the commands vercel build and vercel deploy --prebuilt. But I also have a config for github actions to trigger the deployment automatically. In this case, I can not manually change VERCEL_URL somewhere. I need link for every deploy (not only production and preview links).

I would be grateful for any ideas and tips.

Additional information

No response

Example

https://github.com/paqstd-dev/vercel-public-url-implementation

[paqstd-dev]

Now it works. I didn't change anything in my code. Perhaps this is a server error of Vercel itself.

[RemyMachado]

I have the same problem.

I didn't change the configuration, but it's not working anymore.

It used to replace with the correct value, but now I'm getting as a value: $next_public_vercel_url lowercase instead of the actual url.