તમે 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` સંમેલન સાથે સંયુક્ત, તે સમૃદ્ધ, ડેટા-સંચાલિત સોશ્યલ પ્રીવ્યુ બનાવે છે — લિંક ક્લિક-થ્રુનું વાસ્તવિક ચાલક — એક મેન્યુઅલ કાર્યને બદલે બિલ્ટ-ઇન, નીચલા-પ્રયાસ ફીચર.