Kif toħloq immaġini Open Graph dinamiċi f'Next.js?

Question

Accepted Answer

Next.js jista **joħloq immaġini tal-media soċjali (Open Graph) fuq it-tnejn** bl-użu tal-API `ImageResponse` — li jirkupru JSX/CSS għal PNG fuq il-ħaff. Dan jagħti kull paġna preview ta' sehem personalizzat mingħajr ma tħarrex immaġini bl-idejn. ## Triq tal-immaġini OG ibbażata fuq il-fajl ```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 ); } ``` L-isem tal-fajl speċjali `opengraph-image.tsx` huwa awtomatikament imwaħħal tal-metadata tal-paġna, allura `` tindika dan il-PNG iġġenerat. Kull post tal-blog jirċievi immaġini unika li turi t-titlu u l-awtur attwali. ## Kif taħdem taħt il-kapu ```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). ``` ## Ġenerazzjoni programmatika (xi triq) ```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 }); } ``` ## Għaliex l-immaġini OG dinamiċi huma importanti Immaġini ta' sehem attraenti u speċifika tal-kontenut iżżid drammatikament il-click-through meta l-links jinshru fuq X, LinkedIn, Slack, Discord, eċċ. Il-ħolqien ta' wieħed manwalment għal kull artikolu/prodott mhux prattiku; il-ġenerazzjoni minn data hija awtomatika u dejjem aġġornata. ## Għaliex dan importanti `ImageResponse` (l-API `next/og`) ibiddel JSX+CSS għal immaġini ta' sehem waqt ħin ta' talbiet, allura kull paġna dinamika jista' jkollha preview OG personalizzat mingħajr pipeline tad-disinn. Kombinata mal-konvenzjoni `opengraph-image.tsx`, din tagħti previews ta' media soċjali riċċi u driven-data — drajver reali tal-click-through tal-links — bħala feature integrat u ta' sforz baxx minflok taħriġ manual.