Repository: next.js
Issue: metadataBase value ignored in Dev Mode impedes tunnelled access and alternate port setup
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: 1.22.17
      pnpm: N/A
    Relevant Packages:
      next: 13.4.20-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue or a replay of the bug

Reproducing the NextJS behaviour is easy (see "To Reproduce") and it is not possible to provide a repo as the rest of it requires setting up a tunnel using localtunnel/ngrok.

### To Reproduce

1. Add a opengraph-image.png to any existing route. 
2. Run in dev mode - npm run dev
3. This generates the metadata in the head section with filepath as http://localhost:3000 e.g.
`<meta property="og:image" content="http://localhost:3000/opengraph-image.png?85d0f8ab509c362f">`
4. Overriding this behaviour by setting metadataBase or/and VERCEL_URL environment variable as detailed in the documentation at https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase does not resolve the issue.
5. Creating a build and then accessing the site produces the required output i.e. npm run build and npm start

### Describe the Bug

The http://localhost:3000>/<image file name> appears to be hard coded with the assumptions that all dev mode executions will always be with localhost access and always on port 3000. 

This causes issues when exposing the dev instance on the internet e.g. using localtunnel or ngrok, where the code executes as expected when accessed with the external URL, but still generates the metadata with the hard-coded http://localhost:3000. This behaviour causes issues while testing with SEO card validators like those provided by LinkedIn and Twitter as http://localhost:3000 naturally does not resolve for their servers. Creating a build and testing the code resolves the issue, but results in extra development time and losing the hot reload capability.

This also prevents the use of an alternate port other than 3000 for localhost testing as the port set up in the scripts in package.json also gets ignored e.g. `"dev": "next dev -p 8082",` and the og-image is always generated with the hardcoded port, making it difficult to test using workarounds e.g. other web based testing tools like Social Share Preview Chrome extension as the image is only accessible from the port configured in the dev script. This behaviour also make it difficult to run two different applications in dev mode, which I am normally able to do by simply using different port numbers for each application.

### Expected Behavior

This issue can be resolved by removing the hardcoding of http://localhost:3000 and instead using the base url used to access the site. This would still keep http://localhost:3000 working when used in "standard" testing mode, but also support tunnelled access as well as the use of an alternate port, where the base url (including the port number) used to access the dev instance can be used for constructing the og:image URL and make it accessible from external tools like LinkedIn card validator, etc as well as local tools like the Social Share Preview Chrome extension.

### Which browser are you using? (if relevant)

Not relevant

### How are you deploying your application? (if relevant)

Not relevant