आप Next.js में गतिशील Open Graph छवियां कैसे जनरेट करते हैं?

Question

Accepted Answer

Next.js `ImageResponse` API का उपयोग करके **सामाजिक-साझा (Open Graph) छवियों को मक्खी पर जनरेट कर सकता है** — JSX/CSS को किनारे पर PNG में प्रस्तुत करता है। यह प्रत्येक पृष्ठ को हाथ से छवियों को डिजाइन किए बिना कस्टम शेयर पूर्वावलोकन देता है। ## यह महत्वपूर्ण क्यों है ```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` (`next/og` API) JSX+CSS को अनुरोध समय पर शेयर छवियों में बदलता है, इसलिए प्रत्येक गतिशील पृष्ठ डिज़ाइन पाइपलाइन के बिना एक अनुकूलित OG पूर्वावलोकन हो सकता है। `opengraph-image.tsx` सम्मेलन के साथ संयुक्त, यह समृद्ध, डेटा-संचालित सामाजिक पूर्वावलोकन बनाता है — लिंक क्लिक-थ्रू का एक वास्तविक ड्राइवर — एक निर्मित, कम-प्रयास सुविधा के बजाय एक मैनुअल काम।