Si gjeneron imazhe dinamike të Open Graph në Next.js?

Question

Accepted Answer

Next.js mund të **gjeneron imazhe për ndarje shoqërore (Open Graph) dinamikisht** duke përdorur API `ImageResponse` — duke përshkallëzuar JSX/CSS në PNG në skaj. Kjo u jep çdo faqeje një shikim parashikues të përshkallëzuar pa dizajnuar imazhe me dorë. ## Rregulla e bazuar në skedar për imazhet OG ```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 ); } ``` Emri i veçantë i dosjes `opengraph-image.tsx` është automatikisht i lidhur me metapodatat e faqes, kështu që `` tregon në këtë PNG të gjeneruar. Çdo postim bllogi merr një imazh unik që tregon titullin dhe autorin e tij të vërtetë. ## Si funksionon nën kapot ```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). ``` ## Gjenerimi programatik (çdo rregull) ```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 }); } ``` ## Përse imazhet dinamike të OG kanë rëndësi Një imazh ndaje i bindshëm dhe specifik për përmbajtje rrit ndjeshëm klikimin përmes kur lidhjet botohen në X, LinkedIn, Slack, Discord, etj. Krijimi manual i një për artikull/produkt është jopraktik; gjenerimi i tyre nga të dhënat është automatik dhe gjithmonë i përditësuar. ## Neden önemli `ImageResponse` (API i `next/og`) shndërron JSX+CSS në imazhe ndaje në kohën e kërkesës, kështu që çdo faqe dinamike mund të ketë një parashikimin OG të përshtatshëm pa një rrjedhë dizajni. Të kombinuara me konventën `opengraph-image.tsx`, ato janë parashikime shoqërore të pasura dhe të drejtuara nga të dhënat — një drajver i vërtetë i klikimeve të lidhjeve — një veçori e integruar, e përpjekjeve të ulëta në vend të punës manuale.