Next.js में हर पेज के लिए डायनैमिक OG इमेज बनाएँ

हर पेज के लिए अलग शेयर इमेज डिज़ाइन करना स्केल नहीं करता। बेहतर पैटर्न है एक डायनैमिक रूट जो हर पेज के अपने टाइटल और मेटाडेटा से माँग पर एक ब्रांडेड कार्ड बना दे।

opengraph-image रूट

Next.js किसी रूट सेगमेंट में एक opengraph-image फ़ाइल पढ़ता है और वह जो भी लौटाती है उसे उस रूट के og:image के रूप में परोसता है। next/og से रेंडर होकर, यह बस इमेज पर बनाया गया JSX होता है।

import { ImageResponse } from "next/og";

export default function Image() {
  return new ImageResponse(
    <div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
    { width: 1200, height: 630 },
  );
}

इसे प्रति-पेज बनाएँ

• ·टाइटल रूट के params या अपने डेटा लेयर से खींचें।
• ·कार्ड को अपने ब्रांड एक्सेंट से थीम करें ताकि पूरा नेटवर्क एकसार लगे।
• ·इसे प्लेटफ़ॉर्म की साइज़ सीमाओं के अंदर रखें ताकि यह हमेशा लोड हो।

OG Image स्किल इस रूट को आपकी साइट के हिसाब से थीम करके स्कैफ़ोल्ड करती है और आपके पेजों में openGraph.images जोड़ देती है, ताकि कोई भी दो रूट एक ही प्रीव्यू साझा न करें।