Next.js App Router Guide

In Next.js (version 13+ App Router), dynamic page metadata is configured using the native generateMetadata function.

Because Open Graph Image Generator is an HTTP API, you do not need third-party SDK packages or headless browser engines. Simply format the URL with URLSearchParams.

---

Dynamic Page Example (app/blog/[slug]/page.tsx)

interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export async function generateMetadata({ params }: PageProps): Promise<{
  title: string;
  description: string;
  openGraph: {
    title: string;
    description: string;
    images: Array<{
      url: string;
      width: number;
      height: number;
      alt: string;
    }>;
  };
  twitter: {
    card: "summary_large_image";
    title: string;
    description: string;
    images: string[];
  };
}> {
  const { slug } = await params;
  const title = `Article: ${slug}`;
  const description = "Learn how to build high-performance web systems.";

  const paramsObj = new URLSearchParams({
    title,
    description,
    theme: "dark",
    size: "landscape",
  });
  const ogImageUrl = `https://api.generativeog.in/v1/images/article.png?${paramsObj.toString()}`;

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: [
        {
          url: ogImageUrl,
          width: 1200,
          height: 630,
          alt: title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [ogImageUrl],
    },
  };
}

export default async function Page({ params }: PageProps) {
  const { slug } = await params;
  return (
    <article>
      <h1>{slug}</h1>
    </article>
  );
}

---

Static Site Generation (SSG) with generateStaticParams

If your Next.js application uses generateStaticParams() to pre-render static HTML pages at build time, generateMetadata() runs at build time and embeds the static image URL directly into the generated HTML.

No edge compute or runtime serverless execution is required on your Next.js host when crawlers request the page—the image URL is statically embedded and fetched directly from our global edge network.