Create dynamic Open Graph images with Next.js using @vercel/og

In this blog post, we'll learn how to create dynamic Open Graph images with Next.js and Tailwind CSS using the @vercel/og package.

What is Open Graph?

Open Graph is a protocol for sharing web content on social media. It allows you to control how your content appears when shared on social media platforms like Facebook, Twitter, and LinkedIn.

What is @vercel/og?

@vercel/og is a package that allows you to create dynamic Open Graph images with Next.js and Tailwind CSS. It makes it easy and straightforward to integrate Open Graph images into your Next.js application.

When hosted on Vercel, it uses the Edge Functions feature to generate the Open Graph images on the edge.

Getting started

First, let's create a new Next.js project.

npx create-next-app

Next, let's install the @vercel/og package.

npm install @vercel/og

Creating the Open Graph image

Now, let's create the Open Graph image.

First, let's create an api endpoint called og.tsx in the pages/api directory. A very simple Open Graph image can be created like this:

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "edge",
};

export default function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Source: Vercel docs

This will create an Open Graph image with the text "Hello world!".

Start the development server by running npm run dev and visit http://localhost:3000/api/og to see the Open Graph image.

OG Image example "Hello world!" — OG Image example: Hello world!

Making the Open Graph image dynamic

Now, let's make the Open Graph image dynamic. We can do this by using the NextRequest object. This object contains information about the request, including the query parameters. We can then use the new Url(req.url) method to get the query parameters.

import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

export default function handler(req: NextRequest) {
  // focus
  const { searchParams } = new URL(req.url);
  // focus
  const text = searchParams.get("text");

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
      // focus
        {text}
      </div>
    ),
    {
      width: 1200,
      height: 630,
      // focus
      emoji: "fluent",
    }
  );
}

}

Now, we can pass the text we want to display as a query parameter. For example, if we want to display Hello from query param 👋, we can visit http://localhost:3000/api/og?text=Hello%20from%20query%20param%20👋

Please note that the emoji option is set to fluent in the ImageResponse object.

OG Image example "Hi!" — OG Image example: Hello from query param 👋

Styling the Open Graph image

Now, let's style the Open Graph image with Tailwind CSS.

To use Tailwind CSS, we need to use tw instead of style.

import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

export default function handler(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const text = searchParams.get("text");

  return new ImageResponse(
    (
      // focus
      <div tw="text-6xl bg-white w-full h-full flex flex-col items-center justify-center">
        // focus
        {text}
        // focus
        <div tw="flex text-red-500 mt-12">
          // focus This is styled using // focus
          <span tw="ml-2 text-blue-500 text-bold">TailwindCSS</span>
          // focus
        </div>
        // focus
      </div>
    ),
    {
      width: 1200,
      height: 630,
      emoji: "fluent",
    }
  );
}

Now, we can refresh the page to see the styled Open Graph image with Tailwind CSS.

OG Image example "TailwindCSS" — OG Image example: TailwindCSS

Please keep in mind that the tw prop is still experimental and may change in the future.

Conclusion

In this tutorial, we learned how to create dynamic Open Graph images with Next.js and Tailwind CSS using the @vercel/og package.

It's a great way to create dynamic Open Graph images for your Next.js projects to share on social media.

Resources

About me

I'm a software developer from Germany. I've been working with software development for more than 12 years. I'm passionate about technology and I love to learn new things. I'm currently working as a senior software developer at a company called "Engel & Völkers Technology".

Follow me and find out what I'm working on: