Automate Social Images using Next.js and Puppeteer

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

SurabayaJS

Saturday, 24 October 2020

https://twitter.com/griko_nibras

henlo

My name is Griko Muhammad Sultan Nibras
Or just Griko Nibras if it's too long
Remote software developer based on Toronto, CA
Contributor at Frontend Indonesia, Deno Land Indonesia, commonlabs ID, wwwid, and many more
Just made this slide today, kinda unfinished 😂

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 (:

ogp.me

<meta property="og:title" content="201 Created" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://http.cat/201" />
<meta property="og:image" content="https://http.cat/201.jpg" />

<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 https://http.cat/201.jpg

Preview of https://surabayajs.org on Discord and Telegram

https://github.com/surabayajs/surabayajs.org/tree/master/public

https://vercel.com/surabayajs/surabayajsorg/dtktk05i8/source

https://surabayajs.org/social.jpg

social image location

Root location on same directory (/social.jpg)
Inside some directory (/images/social.jpg)
Other external source (https://somewhere.io/social.jpg)

Important note: social image path must be absolute ⚠️

https://surabayajs.org/social.jpg ✅
surabayajs.org/social.jpg ❌
/social.jpg ❌

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

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

https://hcti.io/v1/image/b1983df7-f7c9-43cd-a5de-b9c02f6c0b28

https://htmlcsstoimage.com

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

Now introducing...

✨ puppeteer ✨

https://github.com/puppeteer/puppeteer

const puppeteer = require('puppeteer');

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

  await browser.close();
})();

Example puppeteer usage

Screenshot example.com and save to example.png