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 प्रतिमा महत्वाचे का आहेत आकर्षक, सामग्री-विशिष्ट शेअर प्रतिमा X, LinkedIn, Slack, Discord इत्यादीवर लिंक पोस्ट केल्यावर क्लिक-थ्रू नाटकीयरीत्या वाढवते. प्रत्येक लेख/उत्पादनासाठी एक व्यक्तिनिष्ठपणे तयार करणे अव्यवहारिक आहे; डेटापासून व्युत्पन्न करणे स्वयंचलित आणि नेहमी अद्यतन असते. ## हे महत्वाचे का आहे `ImageResponse` (API `next/og`) JSX+CSS ला विनंती करताच शेअर प्रतिमेमध्ये बदलते, त्यामुळे प्रत्येक डायनामिक पृष्ठाला डिजाइन पाइपलाइन न करता कस्टमाइज केलेली OG पूर्वावलोकन असू शकते. `opengraph-image.tsx` संप्रदायाच्या सह, हे समृद्ध, डेटा-संचालित सोशल पूर्वावलोकन — लिंक क्लिक-थ्रू चा खरा चालक — हाताने काम करण्याऐवजी अंतर्निर्मित, कमी-प्रयत्न वैशिष्ट्य आहे.