Open Graph Image Generation Error [My fault]

[ASerinYellsNotCute]

Summary

First of all, I don't have much experience using Next.js. Mostly I have wrote code for backends so there may be newbie issues or skill issues existing.
And since I'm not native English speaker, I lack my ability to explain the situation. Apologies in advance.

For anyone who wants TL;DR: on this snippet, if there are no img tags exists in <div style={{ display: "flex", position: "relative" }}>, dev server stops responding and the browser hangs on reloading.

---

What happened

I wanted to create my own Open Graph Image Generator using this example. I have one of my acquaintance to help me with it.

It was all good when suddenly the browser reload icon circles endlessly and the dev server is not responding. There was no error logs or anything. When it occur, the other routes which are not related with the page also keep reloading.

What I have tried

1. Restarting the Dev server (Even if it stopped to log and hang, Ctrl + C works.)
   • It failed as soon as I requested the problematic web page again
2. Directly typing next dev using npm run dev
   • No difference
3. Tried using pnpm, bun, all have failed to solve
4. Removing .next, node_modules and reinstalling the directory

Code + workaround?

The snippet of the code can found here, full index file can be found here.

As a small workaround(...?), if there's "any" img tag exists in the <div style={{ display: "flex", position: "relative" }}>, the web page loads. However the text wrap size is calculated based on the contents, so I want to put the img tag "outside" of the div tag.

Full source code is available on here. If there's any information need, please let me know.

Additional information

`bun run next info`:

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Education
  Available memory (MB): 32621
  Available CPU cores: 20
Binaries:
  Node: 22.1.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.59 // There is a newer canary version (14.3.0-canary.63) available, please upgrade! 
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 4.9.5
Next.js Config:
  output: N/A
 ⚠ There is a newer canary version (14.3.0-canary.63) available, please upgrade! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

(Since I was using latest version of next, I tried to use canary if it was solved. But it didn't helped.)

Example

[icyJoseph]

IIRC, vercel/og uses https://github.com/vercel/satori under the hood, and this is looking more like a problem with that library rather than Next.js

I am a bit confused, you have a body tag, and h1 and such, but the ImageResponse library serves an image, rather than HTML...

So the reason why it "hangs", is that, the HTML you are passing to Satori, to generate an img, not html, is causing some issues with their internal rendering. Note that they don't support the full spec of HTML+CSS.

[ASerinYellsNotCute]

Thanks for the info! I'll check it sonn if time allows.
For the HTML, I wanted to create a image in real-time based on the parameter values. But I think I should have checked the documentations first 😅

[ASerinYellsNotCute]

So... yeah, it seems like it is a rendering issue. I have tested on the OG Playground and seems like it shows the text content is not properly showing, and it seems like it is not suitable to use the whole HTML in the ImageResponse.

I think I have to edit my code to solve this situation. Thanks for the help again!

EDIT:

On Vercel OG Image Playground, when I remove the wikimedia image that I wrote in the code, HTML (native) shows fine minus the texts failing to do word wrap.

However the other option I chose stops the website itself. So I guess something's wrong with my code

EDIT 2:
Oh.

[ASerinYellsNotCute]

I'll remove the whole media if the problem is 100% solved

[ASerinYellsNotCute]

Seems like it has been fully resolved by editing the CSS. Again, thanks for the help!