Dynamic OG images in NextJS - Step-by-Step Execution

Concept Flow - Dynamic OG images

Request for OG image URL

↓

Next.js API Route receives request

↓

Generate image dynamically using code

↓

Return image as response

↓

Browser or social media fetches image

↓

Image displayed in preview

The flow shows how a request for an OG image triggers Next.js to generate and return a custom image dynamically for social previews.

Execution Sample

NextJS

import { ImageResponse } from '@vercel/og';
export const runtime = 'edge';
export default function handler() {
  return new ImageResponse(
    <div style={{ fontSize: '48px' }}>Hello OG</div>
  );
}

This Next.js API route dynamically creates an OG image with the text 'Hello OG' when requested.

Execution Table

Step	Action	Input/State	Output/Result
1	Request received	GET /api/og-image	Handler function triggered
2	Render JSX for image	<div style={{ fontSize: 48 }}>Hello OG</div>	Image canvas created with text
3	Generate image buffer	Canvas with text	PNG image data generated
4	Return image response	PNG image data	HTTP response with image
5	Browser/social fetch	Image URL	Image displayed in preview

💡 Image response sent and displayed; request cycle ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
request	undefined	GET /api/og-image	GET /api/og-image	Request handled
imageJSX	undefined	<div style={{ fontSize: 48 }}>Hello OG</div>	<div style={{ fontSize: 48 }}>Hello OG</div>	Used to create image
imageBuffer	undefined	undefined	PNG binary data	Sent in response

Key Moments - 3 Insights

Why does the handler return an ImageResponse instead of HTML?

Because OG images require an image file, not HTML. The ImageResponse creates an image from JSX to send as a PNG, as shown in execution_table step 3.

How does Next.js know to run this code on the edge?

The export 'runtime = edge' tells Next.js to run the handler as an edge function, enabling fast image generation (see execution_sample).

What triggers the image generation process?

A request to the API route URL triggers the handler, starting the flow at execution_table step 1.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output after step 3?

A PNG image data generated

B HTTP response with image

C Image displayed in preview

D Handler function triggered

💡 Hint

Check the 'Output/Result' column for step 3 in execution_table.

At which step does the browser fetch and display the image?

A Step 2

B Step 3

C Step 5

D Step 1

💡 Hint

Look for 'Image displayed in preview' in execution_table.

If the 'runtime' export is removed, what changes in the process?

A Request will fail immediately

B Image generation runs on the server, not edge

C ImageResponse will not work

D Image will be cached forever

💡 Hint

Refer to key_moments about 'runtime = edge' and its effect.

Concept Snapshot

Dynamic OG images in Next.js:
- Use API routes to generate images on demand
- Return ImageResponse with JSX for image content
- Export 'runtime = edge' for fast edge execution
- Social sites fetch the image URL to show previews
- Enables custom, dynamic social preview images

Full Transcript

Dynamic OG images in Next.js work by creating an API route that generates an image dynamically when requested. The handler uses the ImageResponse class to convert JSX into an image. The export 'runtime = edge' ensures the code runs at the edge for speed. When a social media site or browser requests the image URL, Next.js runs the handler, generates the image, and returns it as a PNG. This image is then displayed in social previews, allowing dynamic and customized visuals for links.