Dynamic OG images in NextJS

Introduction

Dynamic OG images let your website create custom preview pictures automatically. This helps your links look nice and unique when shared on social media.

You want each blog post to have its own special preview image.

Your product pages need images showing product details dynamically.

You want to show user-specific info in the preview image when sharing.

You want to update preview images automatically without manual design.

You want to improve click rates by making previews more attractive.

Syntax

NextJS

export async function GET(request) {
  const image = await generateImage({
    title: 'Hello World',
    subtitle: 'Dynamic OG Image',
  });
  return new Response(image, {
    headers: { 'Content-Type': 'image/png' },
  });
}

This example shows a Next.js API route that returns a generated image.

You can customize the image content by changing the parameters passed to the generator.

Examples

This example uses Next.js's ImageResponse to create a simple white background image with centered text.

NextJS

import { ImageResponse } from 'next/server';

export async function GET() {
  return new ImageResponse(
    (
      <div style={{
        backgroundColor: 'white',
        height: '100%',
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 48,
        fontWeight: 'bold',
      }}>
        Hello, Next.js!
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

This example reads a title from the URL query and shows it in the image with a blue background.

NextJS

import { ImageResponse } from 'next/server';

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

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

Sample Program

This Next.js edge API route generates a dynamic OG image. It reads a title from the URL query and displays it with styled text on a dark background. The image size matches common social media preview dimensions.

NextJS

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') || 'Welcome to My Site';

  return new ImageResponse(
    (
      <div style={{
        backgroundColor: '#282c34',
        height: '100%',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        color: '#61dafb',
        fontSize: 64,
        fontWeight: 'bold',
        padding: '2rem',
        textAlign: 'center',
      }}>
        <div>{title}</div>
        <div style={{ fontSize: 32, marginTop: '1rem', color: '#ffffff' }}>
          Dynamic OG Image with Next.js
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Important Notes

Dynamic OG images improve how your links look on social media.

Use Next.js's ImageResponse from the next/server module to create images on the fly.

Remember to set runtime = 'edge' for faster image generation.

Summary

Dynamic OG images create custom preview pictures automatically.

Next.js provides ImageResponse to build these images easily.

Use URL parameters to customize the image content dynamically.