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.

Practice

1. What is the main purpose of dynamic OG images in Next.js?

easy

A. To create custom preview images automatically based on URL data

B. To improve server response time by caching images

C. To replace all static images with animated GIFs

D. To generate CSS styles dynamically for components

Solution

1. Step 1: Understand OG images

   OG images are preview pictures shown when sharing links on social media.

2. Step 2: Role of dynamic OG images in Next.js

   Dynamic OG images let you create these previews automatically using URL parameters, making each preview unique.

3. Final Answer:

   To create custom preview images automatically based on URL data -> Option A

4. Quick Check:

   Dynamic OG images = Custom previews [OK]

Hint: Dynamic OG images create previews from URL info [OK]

Common Mistakes:

• Thinking dynamic OG images improve server speed
• Confusing OG images with CSS or animations
• Assuming all images become GIFs automatically

2. Which Next.js import is required to create a dynamic OG image?

easy

A. import { generateImage } from 'next/api';

B. import { createImage } from 'next/image';

C. import { DynamicImage } from 'next/og';

D. import { ImageResponse } from 'next/server';

Solution

1. Step 1: Identify the correct import for OG images

   Next.js provides ImageResponse from 'next/server' to build dynamic OG images.

2. Step 2: Check other options

   Other imports like createImage, DynamicImage, or generateImage do not exist or are incorrect for this purpose.

3. Final Answer:

   import { ImageResponse } from 'next/server'; -> Option D

4. Quick Check:

   ImageResponse import = import { ImageResponse } from 'next/server'; [OK]

Hint: Use ImageResponse from next/server for OG images [OK]

Common Mistakes:

• Using imports from 'next/image' instead of 'next/server'
• Assuming 'next/og' or 'next/api' provide OG image tools
• Misspelling ImageResponse or import path

3. Given this Next.js API route code snippet for dynamic OG images, what will be the output image text if the URL query is ?title=Hello?

import { ImageResponse } from 'next/server';

export const runtime = 'edge';

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default';

  return new ImageResponse(
    (
      <div style={{
        backgroundColor: 'white',
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 48,
        color: 'black'
      }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

medium

A. An image with the text 'Default' centered

B. An image with the text 'Hello' centered

C. An image with no text displayed

D. A runtime error due to missing title parameter

Solution

1. Step 1: Extract the title from URL query

   The code gets the 'title' parameter from the URL. If missing, it defaults to 'Default'. Here, the query is '?title=Hello', so title = 'Hello'.

2. Step 2: Render the image with the title text

   The ImageResponse renders a div with the title text centered. Since title is 'Hello', the image will show 'Hello' centered.

3. Final Answer:

   An image with the text 'Hello' centered -> Option B

4. Quick Check:

   title param 'Hello' = text shown [OK]

Hint: Check URL param, fallback used only if missing [OK]

Common Mistakes:

• Assuming 'Default' shows even when title is provided
• Thinking missing text causes error
• Ignoring the URL query parameters

4. Identify the error in this Next.js dynamic OG image code snippet:

import { ImageResponse } from 'next/server';

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get('name');

  return new ImageResponse(
    (
      <div style={{ fontSize: 40 }}>
        Welcome, {name.toUpperCase()}!
      </div>
    ),
    { width: 800, height: 400 }
  );
}

medium

A. Calling toUpperCase() on null if 'name' is missing causes an error

B. ImageResponse must be imported from 'next/image' instead of 'next/server'

C. The style object cannot be used inside JSX for ImageResponse

D. The GET function must be synchronous, not async

Solution

1. Step 1: Check usage of name variable

   The code calls name.toUpperCase() without checking if name is null. If the URL has no 'name' parameter, name is null, causing a runtime error.

2. Step 2: Verify other parts

   Import from 'next/server' is correct. Style objects are allowed in JSX for ImageResponse. The GET function can be async.

3. Final Answer:

   Calling toUpperCase() on null if 'name' is missing causes an error -> Option A

4. Quick Check:

   Null check missing before toUpperCase() [OK]

Hint: Always check for null before string methods [OK]

Common Mistakes:

• Assuming name is always present
• Confusing import source for ImageResponse
• Thinking style objects are disallowed in JSX

5. You want to create a dynamic OG image in Next.js that shows a user's name and their score from URL parameters. The score should show 'N/A' if missing or zero. Which code snippet correctly implements this logic? A:

const score = searchParams.get('score') || 'N/A';
const displayScore = score === 0 ? 'N/A' : score;

B:

const score = Number(searchParams.get('score'));
const displayScore = score ?? 'N/A';

C:

const score = Number(searchParams.get('score'));
const displayScore = score > 0 ? score : 'N/A';

D:

const score = searchParams.get('score');
const displayScore = score === null || score === 0 ? 'N/A' : score;

hard

A. Option A

B. Option B

C. Option C

D. Option D

Solution

1. Step 1: Understand the requirement for score

   The score should be shown as a number if positive, otherwise 'N/A' if missing or zero.

2. Step 2: Analyze each option

   Snippet A uses string fallback and compares score === 0 but score is string, so '0' === 0 false and displays '0'.
   Snippet B converts score to number but uses ?? which only replaces null/undefined, not 0 or NaN, so displays 0 for score=0.
   Snippet C converts score to number and uses a clear check: if score > 0 show score else 'N/A'. This matches requirement perfectly.
   Snippet D compares score as string with === 0, but '0' === 0 false, so displays '0'.

3. Final Answer:

   Option C -> Option C

4. Quick Check:

   Number conversion + >0 check = Option C [OK]

Hint: Convert to number and check > 0 for score display [OK]

Common Mistakes:

• Not converting score to number before comparison
• Using nullish coalescing (??) that ignores zero
• Comparing string '0' instead of numeric zero