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.