Automate Social Images using Next.js and Puppeteer

Because I hate making the same images by hand using Figma.


Saturday, 24 October 2020


slide deets

  • Design social image layout using Next.js

  • Create API route for "rendering" social image using Puppeteer

  • Integrate with Next.js head components

  • Future usage

but first

  • Basic understanding of React, Next.js, Chakra UI, and Puppeteer

  • Only a proof-of-concept and not optimized for large production usage

  • Other approaches are better (more on that later)

have you ever wonder...

halo mbak eka (: 

<meta property="og:title" content="201 Created" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />

<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="750" />
<meta property="og:image:height" content="600" />
<meta property="og:image:alt" content="201 Created" />

Example open graph impl. using

Preview of on Discord and Telegram

social image location

  1. Root location on same directory (/social.jpg)

  2. Inside some directory (/images/social.jpg)

  3. Other external source (

Important note: social image path must be absolute ⚠️

  • ✅
  • ❌
  • /social.jpg

but that's for static images, how about...

✨ d y n a m i c   i m a g e s ✨

"but i don't want to use paid services"

Now introducing...                           

                                 ✨ puppeteer ✨

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('');
  await page.screenshot({ path: 'example.png' });

  await browser.close();

Example puppeteer usage

Screenshot and save to example.png

  • Create page for social image template
  • Run puppeteer to open template page
  • Save and serve image

generate social image flow

some examples

example #1: og-image

example #2: nextplate

example #3: covid19-api

demo time!

question time?