[NEXT-1087] Next OpenGraph Image not working with basePath

[josepholiveira]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: 8.3.1
    Relevant packages:
      next: 13.3.4
      eslint-config-next: 13.3.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/josepholiveira/next13-opengraph-image-basepath-bug

To Reproduce

• Clone repository
• npm i
• npm run dev
• Go to page localhost:3000/test (/test is the basePath in next.config.js)
• Inspect element or use an Metadata checker to see that the opengraph-image.jpg does not have the basePath in the beginning, so it won't ever be loaded correctly.
• Alternatively you can just deploy and share the URL in discord or any other page, and see that the image is not embedded

Describe the Bug

When using the NextJs app folder, with the Metadata API, we can create files named opengraph-image.(jpg|jpeg|png|gif), it works like a charm but not when setting up a basePath in the next.config.js file.

Giving an example, when not using the basePath, the image is added like this to the og:image field:

http://localhost:3000/opengraph-image-1vqp9l.jpg?d41089021927a9d2

But when using the basePath, accessing this URL is not valid and it will not work, but when trying to access manually adding the basePath to the URL, it works:

http://localhost:3000/test/opengraph-image-1vqp9l.jpg?d41089021927a9d2

But NextJS is currently, despite setting up the basePath in next.config.js, not adding the basePath automatically when we use the opengraph-image.

Also, adding here, another bug is that it always considers 3000 as the port, but I was using 3001 that was another reason it didn't work locally.

Expected Behavior

I expected Next to automatically handle the basePath for the opengraph-image.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

_NEXT-1087

[josepholiveira]

Note: Just upgraded to NextJS 13.3.4. This is still a problem, even it being now stable.

[huozhi]

Thanks for reporting, will take a look! 13.4.x is not on npm yet (by the time we comment), but will def follow up to get the fix out asap in later patches 🙏

[josepholiveira]

@huozhi My mistake, now I oficially tested 13.4, and it's still a problem! :p

Thank you for taking a look!

[huozhi]

The fix is landed in 13.4.1-canary.1

[josepholiveira]

Awesome, thanks for doing it so quick! @huozhi