آپ Next.js میں dynamic Open Graph images کیسے generate کرتے ہیں؟

Question

Accepted Answer

Next.js **social-share (Open Graph) images کو فوری طور پر generate کر سکتا ہے** `ImageResponse` API استعمال کرتے ہوئے — JSX/CSS کو edge پر PNG میں render کرتے ہوئے۔ یہ ہر صفحہ کو ہاتھ سے images ڈیزائن کیے بغیر custom share preview فراہم کرتا ہے۔ ## فائل پر مبنی OG image 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 میں connected ہوتا ہے، اس لیے `` اس generated PNG کی طرف اشارہ کرتا ہے۔ ہر blog post کو ایک منفرد image ملتی ہے جو اس کا حقیقی title اور author دکھاتی ہے۔ ## یہ کیسے کام کرتا ہے ```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 }); } ``` ## dynamic OG images کیوں اہم ہیں ایک دلکش، content-specific share image links کو X، LinkedIn، Slack، Discord وغیرہ پر post کرتے وقت click-through کو ڈراماٹی طور پر بڑھاتا ہے۔ ہر article/product کے لیے دستی طور پر ایک بنانا غیر عملی ہے؛ انہیں data سے generate کرنا خودکار اور ہمیشہ اپ ڈیٹ ہوتا ہے۔ ## اہمیت `ImageResponse` (`next/og` API) JSX+CSS کو request time پر share images میں تبدیل کرتا ہے، تاکہ ہر dynamic صفحہ کے پاس design pipeline کے بغیر tailored OG preview ہو سکتا ہے۔ `opengraph-image.tsx` convention کے ساتھ combined، یہ rich، data-driven social previews — link click-through کا حقیقی driver — کو built-in، low-effort feature بناتا ہے بجائے دستی کام کے۔