Sign in
Skip to solution
hardFrontend

How do you implement dynamic Open Graph images in Next.js (ImageResponse)?

373 views
01

Understand the problem

Generating social images at the edge with JSX.

nextjsog-imageimageresponseseo
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

An opengraph-image.tsx file (or the ImageResponse API from next/og) renders JSX/CSS to a PNG on demand, so you generate per-page social share images with dynamic content (title, author) without a design tool or external service.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Generated OG image for a post
// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function OG({ params }) {
  const post = await getPost((await params).slug);
  return new ImageResponse(
    <div style={{ display: 'flex', fontSize: 64, padding: 60 }}>{post.title}</div>,
    size,
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 87 of 95 decoded in the Next.js track. One more won't hurt.

Back to track