Can I use OGKit with Next.js App Router without a custom image route?

Yes. OGKit returns a normal 1200x630 PNG URL from template and query parameters, so you do not need to maintain a Satori, Puppeteer, or screenshot pipeline.

Next.js guide

Next.js OG image generator

Q: How do I add dynamic Open Graph images to Next.js App Router?

Build an absolute OGKit image URL on the server or during static generation, then place it in og:image and twitter:image metadata for each important page.

Q: Where should I keep the OGKit API key?

Keep the API key in server-side environment variables, framework runtime config, or build-time secrets. Do not bundle it into client-side JavaScript.

OGKit is for Next.js Open Graph images when you want a hosted generator instead of maintaining custom `opengraph-image.tsx` routes, Satori layouts, font loading, and render debugging yourself.

Use OGKit in App Router metadata

Build the image URL on the server, then pass it to metadata.openGraph.images. Keep the API key in server-side env vars or generate URLs during build.

const ogImage = new URL("https://www.webmorp.art/api/og/article");
ogImage.searchParams.set("key", process.env.OGKIT_KEY!);
ogImage.searchParams.set("title", "How we shipped faster");
ogImage.searchParams.set("author", "Acme");

export const metadata = {
  title: { absolute: "How we shipped faster — OGKit" },
  openGraph: {
    title: "How we shipped faster",
    images: [ogImage.toString()]
  },
  twitter: {
    card: "summary_large_image",
    images: [ogImage.toString()]
  }
};

Why not always build a custom route?

Custom opengraph-image.tsx routes are great when every pixel needs bespoke layout control. They also make you own font loading, JSX-to-image constraints, render failures, and template QA. OGKit is the simpler path when the page needs a reliable social card, not a custom image renderer.

Production checklist

Build URLs in Server Components or metadata functions.
Keep OGKIT_KEY out of client components.
Use absolute HTTPS URLs.

No image route to maintain

Use templates instead of owning Satori JSX, CSS constraints, and rendering edge cases.

Metadata-ready URLs

Every image is a normal HTTPS URL that works in Open Graph, Twitter cards, Slack, Discord, and iMessage.

Good fit for launches

Generate cards for docs, changelogs, blogs, SaaS landing pages, and product launch pages.

Related Next.js SEO pages

OGKit vs Vercel OG Open Graph image API docs Try the Playground Open Graph SEO guide

Frequently asked questions

How do I add dynamic Open Graph images to Next.js App Router?

Build an absolute OGKit image URL inside generateMetadata or server-side code, then assign it to metadata.openGraph.images and twitter.images.

Can OGKit replace a custom opengraph-image.tsx route?

Yes, when you want hosted templates and stable image URLs instead of maintaining a custom Satori route, font loading, and renderer debugging.

Where should I keep the OGKit API key?

Keep the API key in server-side environment variables. Do not expose it in client components or public JavaScript bundles.