Image Files

These file conventions allow you to set images for a route segment. They are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site, etc.

About

The ImageResponse constructor allows you to generate dynamic images using JSX and CSS. This is useful for creating social media images such as Open Graph images, Twitter cards, and more.

ImageResponse uses the Edge Runtime, and Next.js automatically adds the correct headers to cached images at the edge, helping improve performance and reducing recomputation. Find more information on the Metadata API here: Dynamic Image Generation.

Configuration