ImageResponse Next.js

Last Updated : 15 May, 2024

ImageResponse is a powerful feature that allows you to generate images dynamically on the server side using JSX and CSS. To use an ImageResponse function, you need to import it from "next/og". It uses Vercel's open graph library to generate dynamic images. The ImageResponse constructor, by allowing dynamic image generation through JSX and CSS, proves invaluable for crafting various social media images like Open Graph images, Twitter cards, and beyond.

Syntax:

import { ImageResponse } from 'next/og';

export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
                        display: "flex",
                        height:"100%",
                        width:"100%",
                        .....
       }}>
       ....Other HTML Elements.............
      </div>
    ),
    //Options
    {
      width: 1200,
      height: 630,
      status: 200,
      statusText: "Ok",
      .......
      .......
    },
  );
}

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer a few questions.

npx create-next-app@latest app_name

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router?  ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: After creating your project folder, move to it using the following command.

cd app_name

Project Structure:

Example: The below example demonstrate the use of ImageResponse in Next.js

JavaScript

//File path: src/app/page.js
export default function Home() {
  return (
    <>
      <h1>Login Page</h1>
      <form method="POST" action="api/submit">
        <label>Name</label>
        <input type="text" placeholder="Enter Your Name" name="name" required/>
        <br />
        <label>Age</label>
        <input type="text" placeholder="Enter Your Age" name="age" required/>
        <br />
        <label>City</label> 
        <input type="text" placeholder="Enter Your City" name="city" required/>
        <br />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

JavaScript

//File path: src/app/api/submit/route.js
import { ImageResponse } from "next/og";

export async function POST(req, res) {
    //Get the Form Data
    const Formdata = await req.formData();
    const name = Formdata.get('name');
    const age = Formdata.get('age');
    const city = Formdata.get('city');

    return new ImageResponse(
        (
            <div
                style={
                    {
                        display: "flex",
                        height:"100%",
                        width:"100%",
                        flexDirection: "column",
                        padding: "10px",
                    }}>
                <h1>Submitted Form Data:</h1> <br />
                <h1>Name: {name}</h1><br />
                <h1>Age: {age}</h1><br />
                <h1>City: {city}</h1><br />
            </div>
        ),
        {
            width: 500,
            height: 400,
            status: 200,
            statusText: "Ok"
        },
    )
}