Hogyan generálhatsz dinamikus Open Graph képeket a Next.js-ben?

Question

Accepted Answer

A Next.js **a társas médiához (Open Graph) képeket az-azonnal generálhat** az `ImageResponse` API segítségével — a JSX/CSS-t PNG-vé alakítva az élkerületnél. Ez minden oldalnak egyéni megosztási előnézetet biztosít anélkül, hogy kézzel kellene tervezned a képeket. ## Miért fontos ```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 ); } ``` A speciális fájlnév `opengraph-image.tsx` automatikusan az oldal metaadataihoz van kötve, így az `` erre a generált PNG-re mutat. Minden blogbejegyzés egy egyedi képet kap, amely a valós címet és szerzőt mutatja. ## Hogyan működik a motorháztető alatt ```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). ``` ## Programmatic generáció (bármelyik útvonal) ```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 }); } ``` ## Miért fontosak a dinamikus OG képek Egy vonzó, tartalom-specifikus megosztási kép drámaiasan megemelkedik a click-through-ot, amikor hivatkozásokat közölnek az X, LinkedIn, Slack, Discord stb. felületeken. Cikkenként/termékként manuálisan egyet létrehozni nem praktikus; az adatokból való generálás automatikus és mindig naprakész. ## Miért fontos Az `ImageResponse` (a `next/og` API) a JSX+CSS-t a kérés időpontjában megosztási képekké alakítja, így minden dinamikus oldal rendelkezhet testreszabott OG előnézettel tervezési folyamat nélkül. A `opengraph-image.tsx` konvencióval kombinálva gazdag, adatvezérelt társas médiamegjelenik — egy valódi link click-through hajtómű — beépített, alacsony erőfeszítésű funkció, nem pedig kézi munka.