Wata kwa nki za haɗawa takarda Open Graph masu rai-rai a cikin Next.js?

Question

Accepted Answer

Next.js zai iya **samar da kiyaye na jikin jama'a (Open Graph) a nan nan** ta amfani da `ImageResponse` API — sauya JSX/CSS zuwa PNG a gefen gida. Wannan yana ba da kyau-kyau share preview ga kowane shafuka ba tare da sauya hotunan hannu ba. ## Dalilin da yake mahimmanci ```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 ); } ``` Faɗin fayil na musamman `opengraph-image.tsx` an haɗa shi auta zuwa metadata na shafuka, don `` ya nuna zuwa PNG da aka samar. Kowane jigon blog yana samun hoton na musamman wanda ke nuna azuzuwan sa na gaske da marubuncin. ## Yadda yake aiki a cikin gida ```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). ``` ## Samar hari (wata hanya) ```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 }); } ``` ## Me yasa Open Graph hotuna masu rai-rai suke mahimmanci Kyau-kyau, abun-ciki na share image yana haɓaka tsaye-tsaye masu ziyarci yayin da aka aika linki akan X, LinkedIn, Slack, Discord, da sauransu. Sauya hannu guda daya ga kowane labari/allurar baje-baje ne; samuwa daga bayanai yana aiki auta kuma koyaushe na jiya. ## Dalilin da yake mahimmanci `ImageResponse` (API `next/og`) yana sauya JSX+CSS zuwa hotuwan jikin jama'a a lokacin bukatu, saboda kowane shafukan masu rai-rai zai iya samun kyau-kyau OG duba ba tare da aiki na zanen gida ba. Tare da haɗawa `opengraph-image.tsx`, yana haɓaka kyau-kyau, bayananin jaki ne duka kyau kyau na jikin jama'a — mai aiki ne a gida na linki masu-tsaye — gida, ƴar-hannu-kuma-ƴar, ba tare da aikin hannu ba.