opengraph-image

Place a static image or a code-based file named opengraph-image in an App Router route segment. Next.js uses the most specific matching segment, serves the asset, and adds the corresponding Open Graph metadata to the document head. Code-based variants can return an ImageResponse and export image metadata such as alt text, dimensions, and content type.

app/**/opengraph-image.(jpg|jpeg|png|gif|js|ts|tsx)

A static image asset or a generated image response used as the route segment's Open Graph image.

// app/blog/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export const alt = 'Blog post'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default function Image() {
  return new ImageResponse(
    <div
      style={{
        fontSize: 64,
        background: 'white',
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      Blog post
    </div>,
  )
}

This route-specific file generates an Open Graph image with JSX and CSS for the /blog segment.