Next.js లో డైనమిక్ Open Graph ఇమేజ్‌లను ఎలా జెనరేట్ చేస్తారు?

Question

Accepted Answer

Next.js `ImageResponse` API ఉపయోగించి **సోషల్-షేర్ (Open Graph) ఇమేజ్‌లను డైనమిక్‌గా జెనరేట్ చేయగలదు** — JSX/CSS ను ఎడ్జ్‌లో PNG కు రెండరింగ్ చేయడం. ఇది ప్రతి పేజీకి చేతితో ఇమేజ్‌లను రూపకల్పన చేయకుండా కస్టమ్ షేర్ ప్రివ్యూ ఇస్తుంది. ## ఫైల్-ఆధారిత 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 ); } ``` `opengraph-image.tsx` యొక్క ప్రత్యేక ఫైల్‌నామ్ పేజీ యొక్క మెటాడేటాకు స్వయంచాలకంగా వైర్‌చేయబడింది, కాబట్టి `` ఈ జెనరేట్ చేయబడిన PNG వైపు చూపుతుంది. ప్రతి బ్లాగ్ పోస్ట్ దాని నిజమైన శీర్షిక మరియు రచయితను చూపించే ఒక ప్రత్యేక ఇమేజ్‌ను పొందుతుంది. ## ఇది హుడ్ కింద ఎలా పనిచేస్తుందో ```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). ``` ## ప్రోగ్రామ్‌లాగిక్ జెనరేషన్ (ఏదైనా రూట్) ```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 }); } ``` ## డైనమిక్ OG ఇమేజ్‌లు ఎందుకు ముఖ్యమైనవి ఒక compelling, కంటెంట్-నిర్దిష్ట షేర్ ఇమేజ్ X, LinkedIn, Slack, Discord, మొదలైన వాటిపై లింక్‌లను పోస్ట్ చేసినప్పుడు క్లిక్-థ్రూ నాటకీయంగా పెరుగుతుంది. లేదా కోసం ఒక్కటి చేతితో సృష్టించడం అసాధ్యమైనది; డేటా నుండి అవి జెనరేట్ చేయడం స్వయంచాలక మరియు ఎల్లప్పుడూ నవీకరించబడుతుంది. ## ఇది ఎందుకు ముఖ్యమైనది `ImageResponse` (`next/og` API) JSX+CSS ను రిక్వెస్ట్ సమయంలో షేర్ ఇమేజ్‌లకు మారుస్తుంది, కాబట్టి ప్రతి డైనమిక్ పేజీ ఇమేజ్ డిజైన్ పైపলైన్ లేకుండా టైలర్డ్ OG ప్రివ్యూని కలిగి ఉండవచ్చు. `opengraph-image.tsx` సంప్రదాయ కలిపి, ఇది సমృద్ధమైన, డేటా-ఆధారిత సోషల్ ప్రివ్యూలను కలిగిస్తుంది — ఒక నిజమైన లింక్ క్లిక్-థ్రూ డ్రైవర్ — చేతి పని కంటే, నిర్మిత-లో, తక్కువ-ప్రయత్న ఫీచర్ బదిలీ చేస్తుంది.