ساخت تصاویر Open Graph به صورت داینامیک در NextJS!

در این مقاله به ایجاد و ساخت تصاویر Open Graph و Twitter به صورت داینامیک در فریمورک next js خواهیم پرداخت. با کدنایت همراه باشید!

منظورمان از ساخت داینامیک این تصاویر چیست؟

میدانم تاکنون برای یکبار هم که شده، لینک یک وبسایت را از طریق شبکه های اجتماعی به اشتراک گذاشته اید. با کمی دقت متوجه خواهید شد هنگام به اشتراک گذاری لینک برخی از وبسایت ها در شبکه های اجتماعی، یک تصویر نیز از آن وبسایت مطابق عکس زیر قابل مشاهده خواهد بود:

احتمالا می دانید که برای اضافه کردن چنین تصاویری به صفحات مختلف سایت، باید از متا تگ های توییتر (Twitter) و اوپن گراف (Open Graph) استفاده کنیم:

<head>
  ...
  <meta property="og:image" content="<لینک تصویر مد نظر>">
  <meta name="twitter:image" content="<لینک تصویر مد نظر>">
</head>

همانطور که در کد بالا دیدید، میتوانیم دو متاتگ مورد نیاز را ایجاد کنیم و لینک تصویر مد نظر را برای منظور ذکر شده به عنوان content آنها قرار دهیم.

تا اینجای کار همه چیز ساده و شفاف بود؛ اما از این جا به بعد ماجرای جذاب اصلی آغاز میگردد! فریمورک قدرتمند نکست جی اس در ورژن 13، امکان "ساخت" این تصاویر را به صورت داینامیک در اختیار ما قرار می دهد؛ یعنی به جای در نظر گرفتن لینک یک تصویر ثابت، میتوانیم با استفاده از HTML و CSS تصویر مد نظر خود را بسازیم و خود نکست جی اس آنرا به یک عکس تبدیل کرده و لینک آنرا به عنوان مقادیر این متاتگ ها قرار خواهد داد. با استفاده از این قابلیت خارق العاده، می توانید این تصاویر را به صورت داینامیک و حتی با توجه به داده های دریافت شده از یک api ایجاد کنید؛ به عنوان مثال یکبار دیگر نگاهی به تصویر ابتدای مقاله بیاندازید، در صفحه رزومه ساز کدنایت ما ابتدا تعداد رزومه های ساخته شده را از api دریافت کرده و سپس با استفاده از قابلیت ذکر شده در نکست جی اس، تصاویر توییتر و اوپن گراف را به صورت داینامیک ایجاد می کنیم! در نتیجه با تغییر تعداد رزومه ها، تصاویر اوپن گراف و توییتر نیز مجددا ساخته و به روزرسانی خواهند شد.

روش پیاده سازی

برای پیاده سازی این قابلیت در نکست جی اس، میتوانیم از ImageResponse خود نکست جی اس استفاده کنیم؛ به این صورت که ابتدا یک فایل با نام opengraph-image.tsx در فولدر صفحه مد نظر ایجاد می کنیم:

حال کافیست در این فایل، ImageResponse را ایمپورت کرده و کانفیگ های پایه ای فایل را مطابق کد زیر انجام دهیم:

// app/some-page/opengraph-image.tsx

import { ImageResponse } from "next/server";

// file configs
export const runtime = "edge";
export const contentType = "image/png";

// image configs
export const alt = "Hello CodeNight";
export const size = {
  width: 1200,
  height: 630,
};

متغیر size در کد بالا، برای مشخص کردن ابعاد تصویر و همچنین ساخت متاتگ های og:image:width و og:image:height استفاده خواهد شد، همچنین متاتگ og:image:alt نیز از روی متغیر alt ساخته می شود.

در ادامه، یک فانکشن را به صورت دیفالت اکسپورت کرده و ImageResponse را که از قبل ایمپورت کرده بودیم، در آن فراخوانی و return می کنیم:

// app/some-page/opengraph-image.tsx

import { ImageResponse } from "next/server";

// file configs
export const runtime = "edge";
export const contentType = "image/png";

// image configs
export const alt = "Hello CodeNight";
export const size = {
  width: 1200,
  height: 630,
};

const GenerateImage = async () => {
  return new ImageResponse(<div></div>, {
    ...size,
  });
};

export default GenerateImage;

در کد بالا، کلاس ImageResponse دو argument میپذیرد، مورد اول همان عنصر یا المنتی است که در نهایت به عکس تبدیل میگردد و مورد دوم نیز کانفیگ های مربوط به این کلاس است. لازم به ذکر است که لیست کامل کانفیگ های موجود برای این کلاس در مستندات نکست جی اس و همچنین استایل های CSS پشتیبانی شده توسط این متد نیز به صورت کامل در گیتهاب ورسل قرار دارد.

در ادامه کمی تصویر خود را تکمیل تر خواهیم کرد و همچنین فونت مد نظر خود را نیز به آن می افزاییم:

// app/some-page/opengraph-image.tsx

import { ImageResponse } from "next/server";

// file configs
export const runtime = "edge";
export const contentType = "image/png";

// image configs
export const alt = "Hello CodeNight";
export const size = {
  width: 1200,
  height: 630,
};

const GenerateImage = async () => {
  // font
  const yekanBakhBold = fetch(
    new URL("./yekanBakhBold.ttf", import.meta.url)
  ).then((res) => res.arrayBuffer());

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Hello CodeNight
      </div>
    ),
    {
      ...size,
      fonts: [
        {
          name: "yekanBakh",
          data: await yekanBakhBold,
          style: "normal",
          weight: 900,
        },
      ],
    }
  );
};

export default GenerateImage;

حال اگر وارد صفحه some-page/ (همان صفحه ای که فایل opengrapgh-image.tsx را به آن اضافه کرده بودیم) شویم، خواهیم دید که متاتگ های زیر به تگ هد این صفحه اضافه شده اند:

<meta property="og:image:alt" content="Hello CodeNight">
<meta property="og:image:type" content="image/png">
<meta property="og:image" content="http://localhost:3000/some-page/opengraph-image?0bdde749d497f495">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="Hello CodeNight">
<meta name="twitter:image:type" content="image/png">
<meta name="twitter:image" content="http://localhost:3000/some-page/opengraph-image?0bdde749d497f495">
<meta name="twitter:image:width" content="1200">
<meta name="twitter:image:height" content="630">

و با بازکردن لینکی که به عنوان content متاتگ های og:image و twitter:image قرار دارد، می بینیم که تصویر مدنظر به درستی تولید شده و نمایش داده می شود:

به همین سادگی تصاویر ذکر شده را با کمک نکست جی اس ساخته و ایجاد کردیم! شما نیز می توانید کد های بالا را مطابق سلیقه خود تغییر داده و استایل های پیچیده تر و تصاویر جذاب تری تولید نمایید، همچنین میتوانید درون فانکشن GenerateImage، مثل سایر صفحات نکست جی اسی از api ها و dynamic function ها نیز استفاده کنید و داده های مد نظر را به شکل داینامیک دریافت نمایید.

سخن پایانی

حرکت بر لبه تکنولوژی و آگاهی از جدید ترین قابلیت های هر فریمورک یا لایبری می تواند نقطه قوتی بارز برای هر توسعه دهنده باشد. از همین روی استفاده و به کارگیری مواردی نظیر ImageResponse، علاوه بر ساده کردن فرایند توسعه باعث پیشرفت شخصی خود شما نیز میگردد. سعی کنید همواره مستندات نکست جی اس یا هر فریمورکی که از آن استفاده می کنید را مطالعه کرده و از قابلیت های جدید و جذاب آن اگاه باشید.

مستندات مربوطه در وبسایت نکست جی اس: nextjs.org: opengraph-image and twitter-image

مشتاق شنیدن نظرات شما هستیم!

ساخت تصاویر Open Graph به صورت داینامیک در NextJS!

منظورمان از ساخت داینامیک این تصاویر چیست؟

روش پیاده سازی

سخن پایانی

دیدگاه ها و پرسش ها