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.

[styfle]

Bugs and feedback can be reported at https://github.com/vercel/satori

[dungsil]

It seems that the Noto Sans CJK font is missing the weight.

ex) https://og-playground.vercel.app/?share=dVI9b9RAEP0r40WQxuIMigKYDwkdOXIFNCDRuNnzju091ruWd487c7rCKEhIVCiKRBcoIgqKKEXKVOmdH-GkSor8hOxePpQPpRnNvDc7mnlvpyRWDElIOh3oUSEGNP4MiZJGA5UMlnM15EBLBFZJmvPYtlQgFGXIIClVDm-VSgVC7_JJ9817DVyCybgGhrl6GMlIvmD8SyQBtKkEvpxOXQ7AuC4ErUJYSAROFvwzNEOeZsaCj4Lg_gU45sxkN7CCMsZlOkeLCTy24YKigqeybzDXlo1RGiyvUV27r0VvkcORNjyp7qKdMj2rg3A79x3jQ0TeUZtwKqAfK6kjcrX7A_-KISwG55DBiXntFrg12imflmokWVcJVVp-nHGDV2d9OhfmWRA4cDZz8ZULJxu_fp5s_F6FFRRCeXCw--dwc9eD4_UfR9_XPWjrtfbbWlv_b-u_bb3lQfOv2W629utmZ3-12fFgxRq7t-nBg3sTfLK09Nw61rGW2eHEJ6ow3B5GwimZ20DCp0HgkzOfSLjoCoaDUUrChAqNPrG2D_nHqnA_y4znlZ3jbljOB8hIaMoRzman

[flaviolivolsi]

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.

For this I thought about this workaround:

1. Transform your components in HTML with renderToString
2. Transform your HTML back to a React component with html-to-react

This way you should at least be able to use emotion

[FN-FAL113]

native node.js support would be great while others are only aiming to use the html to image as response without bundling chromium and puppeteer due to api limits. As of now I see it for jsx and tsx only, small projects can really make use of the feature

[thorwebdev]

@leerob I believe there is an issue with the order of the default cache-control headers: it looks like Chrome doesn't support immutable so having max-age before immutable to make sure max-age is applied. https://bugs.chromium.org/p/chromium/issues/detail?id=611416#c46 -- ascorbic/og-edge#1

But not sure where to report this.

If you're seeing this issue, you can work around it by setting the cache-control header manually:

return new ImageResponse(
  (
    <div
      style={{
        width: '2000px',
        height: '1000px',
        backgroundColor: '#000',
        color: '#fff',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
    {/* ...  */}
    </div>
  ),
  {
    width: 2000,
    height: 1000,
    headers: {
      'content-type': 'image/png',
      'cache-control': 'public, max-age=31536000, no-transform, immutable',
    },
  }
)

[Ali762]

This is exactly what I need. However, when I try to follow the getting started guide, I get:
WebAssembly.compile(): Compiling function # 64 failed: Wasm SIMD unsupported @+3494

@vercel/og 0.0.21, NextJS 13.0.5, react 18.2.0, Chrome Browser.

[styfle]

You need Node.js 16 or newer.

See the docs here https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

[Ali762]

You need Node.js 16 or newer.

See the docs here https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

Thanks - But Node is at 16.13.0

(Unless nextjs is running a secret version of Node it's found elsewhere....)

[moroshko]

@leerob Which Tailwind utilities are supported? I'm getting:

`gap-2` unknown or invalid utility

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

export default function handler() {
  return new ImageResponse(
    (
      <div tw="flex gap-2">
        <div tw="text-2xl">Left</div>
        <div>Right</div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Also, it doesn't seem to respect my project's tailwind.config.js. I added some colors there but getting the same "unknown or invalid utility" error.

[rimzzlabs]

Im trying to display an image, it doesn't show, kinda difficult to lookup the error, why is the image not shown?

/* eslint-disable @next/next/no-img-element */
import { ImageResponse } from '@vercel/og'
import { NextRequest } from 'next/server'

export const config = {
  runtime: 'experimental-edge'
}

export default async function handler(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url)

    const hasTitle = searchParams.has('title')
    const title = hasTitle ? searchParams.get('title')?.slice(0) : 'Edge OG with dynamic title'

    return new ImageResponse(
      (
        <div tw='flex items-center h-[600px] w-full py-3 px-5 bg-gray-800 text-zinc-200'>
          <div tw='flex flex-col h-full w-full whitespace-pre-wrap justify-between'>
            <p tw='font-bold text-3xl text-blue-500'>https://rizkicitra.dev/blog</p>
            <p tw='font-extrabold text-6xl'>{title}</p>
            <div tw='flex items-center'>
              <img
                width='44'
                height='44'
                tw='rounded-full'
                style={{
                  objectFit: 'cover'
                }}
                src='https://ik.imagekit.io/mlnzyx/attachment/rizkimcitra.webp'
                alt='Rizki M Citra'
              />
              <p tw='ml-2.5 font-bold text-4xl'>Rizki M Citra</p>
            </div>
          </div>

          <div tw='flex items-center justify-center w-1/2 h-full'>
            <img src='https://ik.imagekit.io/mlnzyx/attachment/logo.png' alt='logo' width={192} height={192} />
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 600
      }
    )
  } catch (err) {
    return new Response('Failed to generate the og image', {
      status: 500,
      statusText: 'failed to generate the og image'
    })
  }
}

The result:
I don't know why but the github image can display normally

EDIT:

I wa finally able to display the image after I restart the dev server

[chukwumaokere]

I'm still getting errors from tailwind

wait  - compiling /api/v1/og (client and server)...
event - compiled successfully in 246 ms (67 modules)
`gradient-to-tr` unknown or invalid utility
`from-zinc-900/50` unknown or invalid utility
`to-zinc-700/30` unknown or invalid utility
`gradient-to-t` unknown or invalid utility
`clip-text` unknown or invalid utility
`from-zinc-100/50` unknown or invalid utility
`to-white` unknown or invalid utility
`whitespace-pre` unknown or invalid utility

Oddly enough these styles work in the OG Image Playground but not in my next13 implementation
Using Next 13.1.1 🤔

[styfle]

If you have a problem that reproduces using the playground, please create an issue in the satori repo.

For all other issues with @vercel/og, please reach out to Vercel Support.