I'm using the Vercel platform kit to build a multitenant app, I have got everything working except the middleware. While using npm run dev it works fine, but while using vercel dev I don't seem to be able to get the same request.

I'm using Next 13.5.6 on the page directory.

Code in the Middleware:

  const url = req.nextUrl;
  console.log(url)

  // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
  let hostname = req.headers
    .get("host")
    .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

  console.log(hostname)

  const searchParams = req.nextUrl.searchParams.toString();
  // Get the pathname of the request (e.g. /, /about, /blog/first-post)
  const path = `${url.pathname}${
    searchParams.length > 0 ? `?${searchParams}` : ""
  }`;

While using "npm run dev" on http://t222.localhost:3000/, a subdomain for testing I get the following for the url and hostname:

url {
  href: 'http://localhost:3000/?domain=t222.mydomain.com',
  origin: 'http://localhost:3000',
  ...
  host: 'localhost:3000',
  hostname: 'localhost',
  ...
  search: '?domain=t222.mydomain.com',
  searchParams: <ref *1> URLSearchParams {
  [Symbol(query)]: [ 'domain', 't222.mydomain.com' ],
  [Symbol(context)]: URL {
  [Symbol(context)]: URLContext {
  href: 'http://localhost:3000/?domain=t222.mydomain.com',
  ...
  },
  [Symbol(query)]: [Circular *1]
}

hostname t222.mydomain.com

For instance, while using "vercel dev" on the same subdomain, I get this for the URL and hostname:

url {
  href: 'http://localhost:3000/',
  origin: 'http://localhost:3000',
  ...
  host: 'localhost:3000',
  hostname: 'localhost',
  ...
  searchParams: <ref *1> URLSearchParams {
  [Symbol(query)]: [],
  [Symbol(context)]: URL {
  [Symbol(context)]: URLContext {
  href: 'http://localhost:3000/',
  ...
  },
  [Symbol(query)]: [Circular *1]
}

hostname [::1]:3000

Why is this happening?