Hvordan genererer du dynamiske Open Graph-billeder i Next.js?

Question

Accepted Answer

Next.js kan **generere billeder til social deling (Open Graph) på flugt** ved hjælp af `ImageResponse` API — rendering af JSX/CSS til PNG ved kanten. Dette giver hver side en brugerdefineret delingsforhåndsvisning uden at designe billeder i hånden. ## En filbaseret OG-billedvej ```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 ); } ``` Det specielle filnavn `opengraph-image.tsx` forbindes automatisk til sidens metadata, så `` peger på dette genererede PNG. Hvert blogindlæg får et unikt billede, der viser dets virkelige titel og forfatter. ## Hvordan det fungerer under motorhjelmen ```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). ``` ## Programmatisk generering (enhver vej) ```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 }); } ``` ## Hvorfor dynamiske OG-billeder er vigtige Et fængslende, indholdsspecifikt delingsbillede øger klik-igennem dramatisk, når links sendes på X, LinkedIn, Slack, Discord osv. Manuel oprettelse af ét billede pr. artikel/produkt er upraktisk; generering af dem fra data er automatisk og altid opdateret. ## Hvorfor det vigtig `ImageResponse` (`next/og` API) omdanner JSX+CSS til delingsbilleder på anmodningstid, så hver dynamisk side kan have en tilpasset OG-forhåndsvisning uden en designpipeline. Kombineret med konventionen `opengraph-image.tsx` gør det rige, datadrevne sociale forhåndsvisninger — en reel driver for klik på links — en indbygget, lavt-indsats-funktion i stedet for en manuel opgave.