[BACKLOG] Use canvas alternative for generating dynamic OG image

[saenyakorn]

Problem

Describe the bug

Canvas is the one of hard-to-install library. It require a lot of external dependencies. Also, our web's Dockerfile need to install that dependencies only for canvas library, that make our image a bit larger. For, OSX users need to install more dependencies just for running the web, see more info.

Task Description

From my quick search result, I found the other solution that suite our requirement using

1. @vercel/og
2. next-api-og-image

So, in my opinion, it's possible to remove canvas from web's dependencies (ASAP).

Additional Context

No response

Related Teams

• [X] Frontend
• [ ] Backend
• [ ] Data
• [ ] Design
• [ ] Infra
• [ ] QA

Task Advisors

@saenyakorn

[suphon-t]

Do note that @vercel/og only supports vercel’s edge runtime, and next-api-og-image needs a browser to work. A possible solution would be using satori + resvg-js.

But personally, I think those external dependencies are not an issue at all. We just have to fix the Dockerfile and that’s it.