Next.js मा गतिशील Open Graph चित्रहरू कसरी उत्पन्न गर्नुहुन्छ?

Question

Accepted Answer

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