blog/generate-opengraph-images-using-playwright

[utterances-bot]

Generate Open Graph images on-demand with Next.js on Vercel - Playwright Community 🎭

Demonstration on how you can use Playwright to create thumbnails of your web pages (e.g. blog) as e.g. Twitter preview image (og:image) built with Next.js

https://playwright.tech/blog/generate-opengraph-images-using-playwright

[ndom91]

This worked perfectly in dev! However, it looks like the api route is ~72mb and vercel only allow 50mb on free plans.

Were you able to reduce the size somehow or are you not on the free plan?

[ndom91]

Saw this was already addressed in a previously closed issue / comment. Utterances is awesome!

EDIT: Except for the fact that I can't close my own issues / comments haha

[ndom91]

Just wanted to point anyone reading this who wants to deploy to vercel to this thread: vercel/vercel#4739

Basically, if you have your api route under /pages/api/.. then vercel will try to do some code sharing on build which will cause your api route to grow over 50mb and vercel will reject your deploy.

The current workaround is to simply move your api directory to /api/... This will cause your api route with chrome-aws-lambda and playwright-core to come in under 50mb 🎉

[ykadosh]

@ndom91 but moving it to the root won't work locally, how do you solve that?

[ndom91]

Hmm, it works locally for me. What issues are you having?

EDIT: You then need to use the vercel cli to run your local dev env, instead of next dev. Checkout the package.json of my project here: https://github.com/ndom91/home2021/blob/main/package.json

EDIT 2: I ended up writing a little blog post about this whole experience btw if you're interested 😉 - https://ndo.dev/posts/link-screenshot

[ykadosh]

@ndom91 Great post! Thanks for sharing. Cool site too!
It's kind of disappointing that this is the only way to get around this issue.

EDIT: I ended up creating a separate project for the screenshot generator just to avoid messing up the folder structure of my original project.