Currently when you deploy Nextjs thorugh CLI or connect from github process.env.NEXT_PUBLIC_VERCEL_URL and process.env.VERCEL_URL both gives the gated URL 😦 instead of giving public URL

For example :

Checkout : https://frames-se2.vercel.app console (I just logged process.env.NEXT_PUBLIC_VERCEL_URL )

It logs : The Vercel URL is: frames-se2-avnvagd82-technophile04s-projects.vercel.app which is gated URL

What breaks having gated URL ?

When having metadata setup, we have logic something like this :

const baseUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : `http://localhost:${process.env.PORT || 3000}`;
const imageUrl = `${baseUrl}/thumbnail.jpg`;

const title = "Scaffold-ETH 2 App";
const titleTemplate = "%s | Scaffold-ETH 2";
const description = "Built with 🏗 Scaffold-ETH 2";

export const metadata: Metadata = {
  metadataBase: new URL(baseUrl),
  title: {
    default: title,
    template: titleTemplate,
  },
  description,
  openGraph: {
    title: {
      default: title,
      template: titleTemplate,
    },
    description,
    images: [
      {
        url: imageUrl,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    images: [imageUrl],
    title: {
      default: title,
      template: titleTemplate,
    },
    description,
  },
};

^ Now because vercel returns gated URL this breaks Open graph displaying images properly

Are their any better way to handle metadata then this ?

PS: process.env.NEXT_PUBLIC_VERCEL_URL used return public URL around 1 or 2 months ago and recently it started logging gated URL