Hoe genereer je dynamische Open Graph-afbeeldingen in Next.js?

Question

Accepted Answer

Next.js kan **sociale-share (Open Graph) afbeeldingen on-the-fly genereren** met behulp van de `ImageResponse` API — JSX/CSS naar een PNG aan de edge renderen. Dit geeft elke pagina een aangepaste share-preview zonder afbeeldingen handmatig te ontwerpen. ## Een op bestanden gebaseerde OG-afbeeldingsroute ```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 ); } ``` De speciale bestandsnaam `opengraph-image.tsx` is automatisch verbonden met de metagegevens van de pagina, dus de `` verwijst naar deze gegenereerde PNG. Elk blogbericht krijgt een unieke afbeelding met de werkelijke titel en auteur. ## Hoe het werkt onder de motorkap ```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 generatie (elke 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 }); } ``` ## Waarom dynamische OG-afbeeldingen belangrijk zijn Een aantrekkelijke, inhoudsspecifieke share-afbeelding vergroot de doorklikking aanzienlijk wanneer koppelingen op X, LinkedIn, Slack, Discord, enzovoort worden gedeeld. Handmatig één per artikel/product maken is impracticaal; genereren vanuit gegevens is automatisch en altijd actueel. ## Waarom het belangrijk is `ImageResponse` (de `next/og` API) zet JSX+CSS tijdens de aanvraag om in share-afbeeldingen, zodat elke dynamische pagina een aangepaste OG-preview kan hebben zonder een designpijplijn. Combineerd met de `opengraph-image.tsx`-conventie, maakt het rijke, datagebaseerde sociale previews — een echte drijfveer van doorklikking op koppelingen — een ingebouwde, laagdrempelige functie in plaats van een handmatige karwei.