With Emoji - Vercel OG Image template

Create a new API endpoint:

// pages/api/og/with-emoji.jsx

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

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

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);

    // dynamic params
    const title = searchParams.has("title")
      ? searchParams.get("title")?.slice(0, 100)
      : "My default title";

    const emoji = searchParams.get("emoji") || "mywebsite.com";

    return new ImageResponse(
      (
        <div tw="h-full w-full flex items-start justify-start bg-sky-50">
          <div tw="flex items-start justify-start h-full">
            <div tw="flex flex-col justify-center items-center px-20 w-full h-full text-center">
              <p tw="text-[120px] mx-auto text-center font-bold mb-0">
                {emoji}
              </p>
              <h1 tw="text-[60px] font-bold">{title}</h1>
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 627,
        // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
        emoji: "twemoji",
      }
    );
  } catch (e) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

You can then create new dynamic images by passing the following parameters to the API endpoint:

const title = "We just raised $100m to build the next-gen todo app!";
const emoji = "🚀";

return <img src={`/api/og/with-emoji?title=${title}&emoji=${emoji}`} />;

// or

return (
  <meta
    property="og:image"
    content={`www.yourdomain.com/api/og/with-emoji?title=${title}&emoji=${emoji}`}
  />
);