Serverless service that generates dynamic Open Graph images used in my personal blog.
Note: If you're using Next.js version 13.0.0 or newer, a highly recommended alternative for generating dynamic social cards is the @vercel/og service. It integrates seamlessly with Next.js and provides a streamlined solution for creating Open Graph (OG) images.
Basically, it's the image that is displayed when you share a hyperlink on Twitter, Facebook, or Slack. See in example:
The single existing page is used as a template with a default size (width and height). You can add any style like you are creating a component
The page could receive props from URL query params and used this to create dynamic images
Puppeteer and chrome-aws-lambda are used to open the template page and get a print screen setting a viewport (with correct image size).
We need an image URL (with .png extension) to show in the Open Graph tag meta. For that we can configure the next redirect to use the API service as image URL
Note: the Puppeteer and chrome-aws-lambda libraries must be at the same version. Latest version of Puppeteer can cause error to running in Vercel.