In addition to using literal image files, you can programmatically generate images using code.
Generate a route segment's shared image by creating an opengraph-image or twitter-image route that default exports a function.
File conventionSupported file typesopengraph-image.js, .ts, .tsxtwitter-image.js, .ts, .tsx
Good to know
By default, generated images are statically optimized (generated at build time and cached) unless they use dynamic functions or dynamic data fetching.
You can generate multiple Images in the same file using generateImageMetadata.
The easiest way to generate an image is to use the ImageResponse API from next/server.
app/about/opengraph-image.tsx import { ImageResponse } from 'next/server'
 
// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const alt = 'About Acme'
export const size = {
  width: 1200,