Announcing Vercel OG

[leerob]

https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images

[walpolea]

Looks incredible! Are there plans to open source it?

[abriginets]

Well I wanted to implement this in my current project and I think after spending a few hours trying I can leave my feedback here.

TLDR; too many limitations and complications, doesn't worth the trouble

1. There is no locale support for Next API routes so you can't make it multilanguage unless you hardcode all possible language templates and come up with your own placeholder replacement implementation.
2. You can't use any other styling/components libraries (except for predefined ones like Tailwind). I'm using MUI + Emotion and it just won't compile.
3. Forcing you to use WASM and experimental-edge environment is a HUGE limitation leading you to make requests to the backend circling you right back to it.
4. Very limited set of CSS properties (e.g. background: linear-gradient(...) doesn't work so you have to open Photoshop, create 1200x630 image, add gradient, save as .png file, include in the bundle, then parse hostname from request URL to download it from static assets folder, etc and so forth)
5. Writing JSX inside API handlers feels weird and breaks code splitting principle.

As a conclusion, NextJS team is great at coming up with game-breaking features but limiting their use to Vercel-hosted deployments just ruins it all.

Extra: no one asked but I would still come up with my own solution proposal. Just add new function to getStaticProps, getServerSideProps and others:

export const getOpenGraphImageProps: GetOpenGraphImageProps = (context): GetOpenGraphImagePropsResult => {
  return {
      width: 1200,
      height: 630,
    },;
};

[leerob]

There is no locale support for Next API routes so you can't make it multilanguage unless you hardcode all possible language templates and come up with your own placeholder replacement implementation.

You could change the locale based on query params rather than using the file system (note that satori/@vercel/og work with more than just Next.js).

You can't use any other styling/components libraries (except for predefined ones like Tailwind). I'm using MUI + Emotion and it just won't compile.

The goal isn't to work with any component library – I would recommend using normal CSS 👍

Forcing you to use WASM and experimental-edge environment is a HUGE limitation leading you to make requests to the backend circling you right back to it.

If you would prefer not to use Wasm, you can use satori in Node.js environments.

Very limited set of CSS properties

Thanks for the feedback, we will work on expanding support.

NextJS team is great at coming up with game-breaking features but limiting their use to Vercel-hosted deployments just ruins it all.

satori isn't limited to Next.js – it's designed for any framework. It could also be hosted anywhere. @vercel/og is the version that's specifically for Vercel, but it can still be used with any framework.

[fredrivett]

This is ace work, and seems super powerful.

I've just spent a few hours implementing it for privacyshortlist.com, but I'm currently deploying with Netlify, is it a requirement to use Vercel hosting for this to work, or is it possible to use other providers with this package?

I'm not expecting you to help debug my issue, more just working out whether it's worth debugging or if it'll require switching to Vercel to use.

Cheers!

[leerob]

Hey! This is a Vercel-specific product, yeah. The open-source satori handles conversation to SVG, and @vercel/og handles the conversation to PNG and caching images at the edge.

Happy to help you move over to Vercel, lmk!

[fredrivett]

Ace thanks @leerob, will look into the possibility of migrating over, cheers.

[nomercy360]

Hi, I have a problem with emoji rendering in the new version. If they come from an external api, they are displayed incorrectly, maybe you know what could be the reason?

[shuding]

Hey @nomercy360 could you reproduce it in the playground: https://og-playground.vercel.app? You can open an issue in https://github.com/vercel/satori and we will take a look!

[with-heart]

Thanks for the awesome lib! Great work, as always ❤️

Just wanted to report that all of the source links for the examples on @vercel/og are broken because they use https://npmjs.com/ as the base url.

[yannglt]

Just wanted to report that all of the source links for the examples on @vercel/og are broken because they use https://npmjs.com/ as the base url.

@with-heart could you elaborate? My code works perfectly locally but is rendering a blank image when deployed, no error logs on Vercel. And when I checked on @vercel/examples, all the examples were broken, as you mentioned.

[AleeRojas]

@yannglt I have the same problem, a broken image is generated, I thought I was the only one

[yannglt]

@AleeRojas Yeah... this feature is pretty awesome tho — I don't really understand where this bug can come from :/

[with-heart]

My code works perfectly locally but is rendering a blank image when deployed, no error logs on Vercel. And when I checked on @vercel/examples, all the examples were broken, as you mentioned.

I was only commenting on the links on npmjs.com!

I was running into issues with local rendering today, with compilation timing out. Somehow I found that setting webpack.config.experiments.layers to true got it working again. Not sure if it's relevant, but just in case this is how it looks:

// next.config.mjs

const nextConfig = {
  // …
  webpack: (config, options) => {
    config.experiments = {
      layers: true,
    }
    return config
  }
  // … 
}

[with-heart]

@ vercel friends: Is there a public issues-only repo for reporting @vercel/og issues or anything like that? I'd love to give feedback and report bugs but I'm not sure how to do that.