Wie generieren Sie dynamische Open Graph-Bilder in Next.js?

Question

IT Interview Practice · Accepted Answer

Next.js kann **Social-Media-Bilder (Open Graph) dynamisch generieren** mit der `ImageResponse` API — JSX/CSS wird an der Edge zu PNG gerendert. Dadurch erhält jede Seite eine maßgeschneiderte Vorschau beim Teilen, ohne dass Bilder manuell entworfen werden müssen. ## Eine dateibasierte OG-Bildroute ```tsx // app/blog/[slug]/opengraph-image.tsx import { ImageResponse } from "next/og"; export const size = { width: 1200, height: 630 }; // standard OG dimensions export const contentType = "image/png"; export default async function OGImage({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // fetch real data for this page return new ImageResponse( ( // JSX styled with a subset of CSS (flexbox), rendered to an image

{post.title}

{post.author}

), size ); } ``` Der spezielle Dateiname `opengraph-image.tsx` wird automatisch mit den Metadaten der Seite verknüpft, sodass `` auf dieses generierte PNG verweist. Jeder Blogbeitrag erhält ein einzigartiges Bild mit seinem echten Titel und Autor. ## Wie es unter der Haube funktioniert ```text ImageResponse uses Satori → converts JSX + (flexbox) CSS → SVG → PNG. Runs on the Edge runtime → fast generation, cacheable. Supports custom fonts, images, and gradients (a CSS subset, not full CSS). ``` ## Programmatische Generierung (jede Route) ```tsx // app/api/og/route.tsx — generate from query params import { ImageResponse } from "next/og"; export function GET(req: Request) { const title = new URL(req.url).searchParams.get("title") ?? "Default"; return new ImageResponse(

{title}

, { width: 1200, height: 630 }); } ``` ## Warum dynamische OG-Bilder wichtig sind Ein ansprechendes, inhaltsspezifisches Teilen-Bild erhöht die Klickrate dramatisch, wenn Links auf X, LinkedIn, Slack, Discord usw. geteilt werden. Das manuelle Erstellen eines Bildes pro Artikel/Produkt ist unpraktisch; die Generierung aus Daten ist automatisch und immer aktuell. ## Warum es wichtig ist `ImageResponse` (die `next/og` API) wandelt JSX+CSS zur Anforderungszeit in Teilen-Bilder um, sodass jede dynamische Seite eine maßgeschneiderte OG-Vorschau ohne Design-Pipeline haben kann. Gekoppelt mit der `opengraph-image.tsx`-Konvention ermöglicht es reichhaltige, datengesteuerte Social-Media-Vorschauen — ein echter Treiber für Link-Klicks — als integriertes, wartungsarmes Feature anstelle einer manuellen Aufgabe.

Eine dateibasierte OG-Bildroute

Wie es unter der Haube funktioniert

Programmatische Generierung (jede Route)

Warum dynamische OG-Bilder wichtig sind

Warum es wichtig ist

Ähnliche Fragen