Conas a ghineann tú íomhánna Open Graph dinimiciúla i Next.js?

Question

Accepted Answer

Is féidir le Next.js **íomhánna páirt-roinn sóisialta (Open Graph) a ghiniúint ar an imeall** ag úsáid an API `ImageResponse` — ag tiontú JSX/CSS go PNG ag an imeall. Tugann sé seo léargas páirt-roinn saincheaptha do gach leathanach gan íomhánna a dhearadh de láimh. ## An fáth a bhfuil sé tábhachtach ```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 ); } ``` Tá an ainm speisialta comhaid `opengraph-image.tsx` ceangailte go huathoibríoch do mheiteashonraí an leathanaigh, agus mar sin an `` ag pointeáil ar an PNG ginte seo. Faigheann gach post blag íomhá uathúil a thaispeánann a theideal agus a údar fíor. ## Conas a oibríonn sé faoin bhonnchóir ```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). ``` ## Giniúint chláraithe (aon bhealach) ```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 }); } ``` ## Cén fáth a bhfuil íomhánna OG dinimiciúla tábhachtach Méadaíonn íomhá páirt-roinn tarraingteach agus saincheaptha don bhréalach an rath ar chliceanna nuair a bhíonn naisc a phostáil ar X, LinkedIn, Slack, Discord, srl. Tá sé neamhphraiticiúil ceann a chruthú de láimh do gach alt/táirge; a ghiniúint ó sonraí a bhíonn uathoibríoch agus i gcónaí suas chun dáta. ## An fáth a bhfuil sé tábhachtach `ImageResponse` (an API `next/og`) a thiontaíonn JSX+CSS go híomhánna páirt-roinn ag am an iarratais, ionas gur féidir le gach leathanach dinimiciúil léargas OG saincheaptha a bheith aige gan phíoplíne dhearaidh. A chéasadh leis an gconbhinsiún `opengraph-image.tsx`, cruthódh sé léargas sóisialta saibhir agus sonraí-dhriofar — dreoraí fíor ar chlic ar naisc — gné bhúntáite, íseal-iarrachtas seachas gníomh láimhe.