Dynamic Open Graph images with Next.js

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • og-image

    Discontinued Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc

    But what if the content of the page is not visual at all, and no photo really suits the contents of the page? And what if we have a lot of these pages, with dynamically generated content? Luckily we are not limited to photography, we can use text! The prime example of this is how GitHub generates previews for issue URLs: they generate an image containing enough info such that users know what they will click on. These images are generated on-demand, as storing an image for every GitHub pull request or issue would be unfeasable. Another example is Vercel, which even open sourced their Open Graph Image as a Service that they occasionally use on blog posts or announcements.

  • next-api-og-image

    :bowtie: Easy way to generate open-graph images dynamically in HTML or React using Next.js API Routes. Suitable for serverless environment.

    As you see in the code above, we are using the next-api-og-image library with almost no configuration required to generate the images. Super easy! The interesting part however is what the library does under the hood.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • chrome-aws-lambda

    Chromium Binary for AWS Lambda and Google Cloud Functions

    When requesting the API route, the Next.js serverless function will actually spin up a web browser on the server (a headless instance of Chromium, using chrome-aws-lambda). Next, a webpage will be generated with HTML we can define ourselves. This HTML will be used to construct the image. That means that as a developer we can generate images using HTML and CSS, technologies we are already familiar with!

  • puppeteer

    Node.js API for Chrome

    Finally, a screenshot of the webpage is taken using puppeteer and sent to the client-side.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts