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

Question

Accepted Answer

Next.js kan **generere sosiale-deling (Open Graph) bilder on-the-fly** ved hjelp av `ImageResponse` API-en — gjengivelse av JSX/CSS til en PNG ved kanten. Dette gir hver side en tilpasset delingsforhåndsvisning uten å designe bilder manuelt. ## En filbasert OG-bilderoute ```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 spesielle filnavnet `opengraph-image.tsx` er automatisk tilkoblet sidens metadata, så `` peker til denne genererte PNG-en. Hvert blogginnlegg får et unikt bilde som viser dets virkelige tittel og forfatter. ## Hvordan det fungerer under hetten ```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 rute) ```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-bilder er viktig Et overbevisende, innholdsrelatert delingsbilder øker gjennomklikk drastisk når lenker legges ut på X, LinkedIn, Slack, Discord, osv. Å manuelt lage ett per artikkel/produkt er upraktisk; å generere dem fra data er automatisk og alltid oppdatert. ## Hvorfor det er viktig `ImageResponse` (`next/og` API) gjør JSX+CSS om til delingsbilder på forespørselstid, slik at hver dynamisk side kan ha en skreddersydd OG-forhåndsvisning uten en designpipeline. Kombinert med `opengraph-image.tsx`-konvensjonen gjør det rike, datadrevne sosiale forhåndsvisninger — en virkelig driver av lenkeklikk — til en innebygd, lavintensitets funksjon i stedet for en manuell oppgave.