Image Metadata Files

Generating social cards dynamically with JSX.

Next.js3 min readConcept 58 of 66

Dynamic OG Images

When someone pastes a link to your site in iMessage or Twitter, it unfurls into a large preview card. This is powered by Open Graph (OG) images.

Instead of using a single static image, Next.js allows you to create an opengraph-image.tsx file. Inside this file, you write standard React/JSX to design the image, and Next.js compiles it into a .png on the fly.

Automated Marketing

For dynamic routes like /blog/[slug], a single static OG image looks generic.

By using opengraph-image.tsx, you can intercept the slug parameter, fetch the specific article's title and author, and render them directly onto the image.

This massively increases click-through rates on social media without requiring a designer to manually create thousands of images.

Implementation

tsx

import { ImageResponse } from 'next/og';

export default async function Image({ params }) {

const post = await fetchPost(params.slug);

return new ImageResponse(

(

<div style={{ display: 'flex', background: 'blue', color: 'white' }}>

<h1>{post.title}</h1>

</div>

),

{ width: 1200, height: 630 }

);

}

JSX to Image Pipeline

Watch the compilation pipeline take a JSX component and render it into a physical 1200x630 Open Graph image.

opengraph-image.tsx

import { ImageResponse } from 'next/og';
export default async function Image() {
const title = "Next.js 15 Released";
return new ImageResponse(
(
<div
style={{
display: 'flex',
background: 'linear-gradient(to right, #0ea5e9, #8b5cf6)',
color: 'white',
width: '100%', height: '100%'
}}
>
<h1>{title}</h1>
</div>
),
{ width: 1200, height: 630 }
);
}

Social Preview

Acme Blog
acme.com

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why can't you use CSS Grid or `gap` inside `opengraph-image.tsx`?

Remember this

  • opengraph-image.tsx and twitter-image.tsx generate dynamic .png images.
  • You write the design using standard React JSX and ImageResponse.
  • You can access URL params to fetch dynamic data for the image.
  • The CSS engine (Satori) is highly restricted. Avoid Grid, calc(), and gap.

Done with this concept?

Mark it complete to track your progress. No login needed.