🌠 Imagegen as a Service (Next.js)

Imagegen (image generator) as a Service, built with Next.js and Vercel.

ℹ️ If you prefer Node.js + Docker (+ AWS, GCP, DigitalOcean, etc) to Next.js + Vercel, checkout this repository.

What is this?

This is a (REST) API service that generates dynamic images for different purposes, is especially useful to generate cover images for content distribution:

Blogging & writing.
Videos' thumbnails.
Open-source repositories' social images.
etc.

It's built and deployed serverlessly thanks to Next.js and Vercel, so there is nothing to maintain. Moreover, thanks to Vercel's generous hobby plan, this service is completely free for non-commercial use.

ℹ️ If you prefer other cloud platforms (AWS, GCP, DigitalOcean, etc) to Vercel for commercial use, checkout Node.js + Docker version.

Example

The above image is a dynamic image generated by this service, copy and paste the URL below on your browser to see it yourself:

https://img.phuctm97.com/api/v2/%F0%9F%8E%86%20**Imagegen**%20as%20a%20Service?&icons=Next.js&icons=Vercel

How should you use it?

There is a limit to Vercel's free plan, so feel free to test the API on my website but please don't use it directly on yours. Instead:

Fork the repository.
Make changes to fit your needs (see below, it's easy).
Create a new Vercel project and import your forked repository (you'll need a Vercel account).
Done 🎉. Vercel will give you a deployment URL, check it out!

API

V1

Generic, non-personalized, fewer features.

URL: GET /api/v1/[slug]

Query params:

text: string.(png|jpg)
theme: "light" | "dark"
md: boolean # Enable/disable basic Markdown syntax
fontSize: string
images: string[]
widths: string[]
heights: string[]

All query params are optional, reasonable defaults are used when necessary.

Example:

https://img.phuctm97.com/api/v1/**Hello**%20World.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg

V2

Personalized, more features.

URL: GET /api/v2/[slug]

Query params:

text: markdown.(png|jpg)
target: "og" | "devto"
theme: "light" | "dark"
icons: string[]
colors: string[]

text supports basic Markdown syntax. Emojis are replaced with Twemoji variants.
target defines format suitable for distribution to a specific channel, currently supports Open Graph (og) and DEV.to (devto) .
icons are loaded from Simple Icons. Use names appearing on Simple Icons' website as API inputs. Not found icons are ignored.
colors are valid CSS colors, or default to use Simple Icons' suggested colors, or invert to invert the default colors.

All query params are optional, reasonable defaults are used when necessary.

Example:

https://img.phuctm97.com/api/v2/%F0%9F%8E%86%20**Imagegen**%20as%20a%20Service?&icons=Next.js&icons=Vercel

Project structure

The project uses Puppeteer to launch and capture screenshots from a headless Chrome. Responses are cached for 7 days to increase performance and reduce loads.

server/v1: parse API v1 requests and generate static HTML.
- Change parser.ts to update query API.
- Change template.ts to customize output images.
server/v2: parse API v2 requests and generate static HTML.
- Change parser.ts to update query API.
- Change template.ts to customize output images.
images/avatar.jpg: author's avatar used in v2. Replace with yours.
server/*.ts: utils to process HTML and capture screenshots.
pages/api/v1, pages/api/v2: Next.js API routes to receive requests (you probably won't need to change this).
fonts: Fonts are loaded locally in server/*/template.ts. Replace with your fonts (if necessary).

Recommended approach: copy api/v1 + server/v1 (or api/v2 + server/v2) to v3, then make changes arcordingly. It won't accidentially crash your code this way.

Development

Requirements

Node.js 12.
Yarn 1.22+.
Google Chrome.

Setup

Install dependencies:

yarn

Start development server:

yarn dev

See package.json for all pre-configured scripts.

Author

Made by (@phuctm97).

Thanks

Heavily inspired by Vercel's og-image.

phuctm97 / img