Hur genererar du dynamiska Open Graph-bilder i Next.js?

Question

Accepted Answer

Next.js kan **generera bilder för social sharing (Open Graph) dynamiskt** med hjälp av API:t `ImageResponse` — genom att rendera JSX/CSS till en PNG vid kanten. Detta ger varje sida en anpassad delningsförhandsvisning utan att behöva designa bilder för hand. ## En filbaserad OG-bildväg ```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 speciella filnamnet `opengraph-image.tsx` är automatiskt kopplat till sidans metadata, så `` pekar på denna genererade PNG. Varje blogginlägg får en unik bild som visar dess verkliga titel och författare. ## Hur det fungerar under huven ```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 (vilken väg som helst) ```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 }); } ``` ## Varför dynamiska OG-bilder är viktiga En övertygande, innehållsspecifik delningsbild ökar klickfrekvensen dramatiskt när länkar publiceras på X, LinkedIn, Slack, Discord osv. Att manuellt skapa en per artikel/produkt är opraktiskt; att generera dem från data är automatisk och alltid uppdaterad. ## Varför det är viktigt `ImageResponse` (API:t `next/og`) förvandlar JSX+CSS till delningsbilder vid förfrågningstillfället, så varje dynamisk sida kan ha en anpassad OG-förhandsvisning utan en designprocess. Tillsammans med konventionen `opengraph-image.tsx` gör det rika, datadrivna sociala förhandsvisningar — en verklig drivkraft för klick på länkar — till en inbyggd, lågefforts-funktion istället för ett manuellt arbete.