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

Question

IT Interview Practice · 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 بناتا ہے بجائے دستی کام کے۔

فائل پر مبنی OG image route

یہ کیسے کام کرتا ہے

Programmatic generation (کوئی بھی route)

dynamic OG images کیوں اہم ہیں

اہمیت

متعلقہ سوالات