Next.js সামাজিক-শেয়ার (Open Graph) ছবিগুলি তাৎক্ষণিকভাবে তৈরি করতে পারে ImageResponse API ব্যবহার করে — JSX/CSS-কে প্রান্তে PNG-এ রেন্ডার করে। এটি প্রতিটি পৃষ্ঠাকে ম্যানুয়ালি ছবি ডিজাইন না করে একটি কাস্টম শেয়ার প্রিভিউ প্রদান করে।
{ } ;
size = { : , : };
contentType = ;
() {
post = (params.);
(
(
),
size
);
}
বিশেষ ফাইলনাম opengraph-image.tsx স্বয়ংক্রিয়ভাবে পৃষ্ঠার মেটাডেটায় তারযুক্ত করা হয়, তাই <meta property="og:image"> এই উত্পন্ন PNG-এর দিকে নির্দেশ করে। প্রতিটি ব্লগ পোস্ট তার বাস্তব শিরোনাম এবং লেখক দেখানো একটি অনন্য ছবি পায়।
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).
// 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(<div style={{ display: "flex" }}>{title}</div>, { width: 1200, height: 630 });
}
একটি আকর্ষণীয়, সামগ্রী-নির্দিষ্ট শেয়ার ছবি X, LinkedIn, Slack, Discord ইত্যাদিতে লিঙ্ক পোস্ট করা হলে ক্লিক-থ্রু উল্লেখযোগ্যভাবে বৃদ্ধি করে। প্রতিটি নিবন্ধ/পণ্যের জন্য ম্যানুয়ালি একটি তৈরি করা অবাস্তব; ডেটা থেকে সেগুলি তৈরি করা স্বয়ংক্রিয় এবং সর্বদা আপ-টু-ডেট থাকে।
ImageResponse (next/og API) JSX+CSS-কে অনুরোধের সময়ে শেয়ার ছবিতে রূপান্তরিত করে, তাই প্রতিটি গতিশীল পৃষ্ঠার ডিজাইন পাইপলাইন ছাড়াই একটি কাস্টমাইজড OG প্রিভিউ থাকতে পারে।
opengraph-image.tsx কনভেনশনের সাথে মিলিত, এটি সমৃদ্ধ, ডেটা-চালিত সামাজিক প্রিভিউ তৈরি করে — একটি বাস্তব লিঙ্ক ক্লিক-থ্রু চালক — একটি নির্মিত, কম-প্রচেষ্টার বৈশিষ্ট্য হিসাবে একটি ম্যানুয়াল কাজের পরিবর্তে।