Generate Open Graph images with Vercel’s API route functions
Install @vercel/og
, then use it inside an API route in your Next.js project:
// /pages/api/og.jsx
import { ImageResponse } from '@vercel/og'
export default function () {
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 128,
background: 'lavender',
}}
>
Hello!
</div>
)
)
}
Then run next dev
and access localhost:3000/api/og, the React element will be rendered and responded as a PNG from that endpoint:
Read more about the API, supported features and check out the examples in the following sections.
@vercel/og
supports both Node.js Runtime and Edge Runtime.
The package exposes an ImageResponse
constructor, with the following options available:
import { ImageResponse } from '@vercel/og'
// ...
new ImageResponse(
element: ReactElement,
options: {
width?: number = 1200
height?: number = 630
emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat' = 'twemoji',
fonts?: {
name: string,
data: ArrayBuffer,
weight: number,
style: 'normal' | 'italic'
}[]
debug?: boolean = false
// Options that will be passed to the HTTP response
status?: number = 200
statusText?: string
headers?: Record<string, string>
},
)
When running in production, these headers will be included by @vercel/og
:
'content-type': 'image/png',
'cache-control': 'public, immutable, no-transform, max-age=31536000',
During development, the cache-control: no-cache, no-store
header is used instead.
Please refer to Satori’s documentation for a list of supported HTML and CSS features.
By default, @vercel/og
only has the Noto Sans font included. If you need to use other fonts, you can pass them in the fonts
option. Check the Custom Font example below for more details.
- Basic · source · demo
- Embed SVG Image · source · demo
- Dynamic PNG Image Based on URL Queries · source · demo
- Fetch External Data · source · demo
- Custom Font · source · demo
- Emoji · source · demo
- Languages · source · demo
- Encrypted Token · source · demo
-
pnpm i
inside theplayground/
directory -
pnpm dev
to start the Next.js app
-
pnpm i
inside the root directory -
pnpm build
to build the library -
pnpm types
to generate the types
This project will not be possible without the following projects: