Dynamic OG images in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js ImageResponse for dynamic OG images.

NextJS

import { [1] } from '@vercel/og';

Drag options to blanks, or click blank then click option'

ANextImage

BImage

COGImage

DImageResponse

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'Image' instead of 'ImageResponse'.

Using a non-existent import like 'OGImage'.

The ImageResponse is imported from '@vercel/og' to create dynamic OG images in Next.js.

2fill in blank

medium

Complete the code to define the size of the dynamic OG image.

NextJS

export const runtime = 'edge';

export async function GET() {
  return new ImageResponse(
    <div style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>
      <h1>Hello OG Image</h1>
    </div>,
    {
      width: [1],
      height: 630
    }
  );
}

Drag options to blanks, or click blank then click option'

A1200

B800

C600

D400

Attempts:

3 left

💡 Hint

Common Mistakes

Using too small width like 400 or 600 which may look blurry.

Confusing width and height values.

The recommended width for OG images is 1200 pixels for good display on social platforms.

3fill in blank

hard

Fix the error in the React component used inside ImageResponse by completing the blank.

NextJS

return new ImageResponse(
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'black', width: '100%', height: '100%' }}>
    <h1 style={{ color: 'white', fontSize: 72, fontWeight: 'bold' }}>[1]</h1>
  </div>,
  { width: 1200, height: 630 }
);

Drag options to blanks, or click blank then click option'

A'Dynamic OG Image'

BDynamic OG Image

C"Dynamic OG Image"

D{Dynamic OG Image}

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the text unquoted causing syntax errors.

Using curly braces incorrectly around plain text.

Text inside JSX must be a string or expression. Using double quotes around the string is correct here.

4fill in blank

hard

Fill both blanks to create a dynamic OG image that uses a query parameter 'title' and displays it.

NextJS

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

  return new ImageResponse(
    <div style={{ backgroundColor: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <h1 style={{ fontSize: 64, fontWeight: 'bold' }}>{title}</h1>
    </div>,
    { width: 1200, height: [2] }
  );
}

Drag options to blanks, or click blank then click option'

Atitle

Btext

C630

D800

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong query parameter name like 'text'.

Setting height to an unusual value like 800.

The query parameter key is 'title' and the height for OG images is usually 630 pixels.

5fill in blank

hard

Fill all three blanks to create a dynamic OG image with a blue background, white text, and font size 72.

NextJS

export async function GET() {
  return new ImageResponse(
    <div style={{ backgroundColor: '[1]', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <h1 style={{ color: '[2]', fontSize: [3], fontWeight: 'bold' }}>Hello Next.js OG</h1>
    </div>,
    { width: 1200, height: 630 }
  );
}

Drag options to blanks, or click blank then click option'

Ablue

Bwhite

C72

Dblack

Attempts:

3 left

💡 Hint

Common Mistakes

Using black text on blue background causing low contrast.

Setting font size too small or as a string instead of number.

The background color is blue, text color is white, and font size is 72 pixels for clear visibility.

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