როგორ აგენერირებთ დინამიური Open Graph-ის სურათებს Next.js-ში?

Question

Accepted Answer

Next.js-მა შეუძლია **სოციალური გაზიარების (Open Graph) სურათების დაგენერირება ფრთხე**ლად `ImageResponse` API-ის გამოყენებით — JSX/CSS-ის PNG-ში ხაზზე რენდერირება. ეს ყველა გვერდს სხვადსხვა გაზიარების წინასწარ ნახვას იძლევა, ხელით სურათების დიზაინის გარეშე. ## ფაილზე დაფუძნებული OG-ის სურათის მარშრუტი ```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` ავტომატურად დაკავშირებულია გვერდის მეტამონაცემებთან, ამიტომ `` მიუთითებს ამ გენერირებულ PNG-ზე. თითოეული ბლოგის პოსტი იღებს უნიკალურ სურათს, რომელიც აჩვენებს მის რეალურ სათაურს და ავტორს. ## როგორ მუშაობს ის ზე ```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). ``` ## პროგრამული გენერირება (ნებისმიერი მარშრუტი) ```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 }); } ``` ## რატომ აქვს მნიშვნელობა დინამიურ OG-ის სურათებს მიმზიდველი, ზმისთან შესაბამისი გაზიარების სურათი მკვეთრად ზრდის დაჭერებს, როდესაც ბმულები გამოქვეყნებულია X-ზე, LinkedIn-ზე, Slack-ზე, Discord-ზე და სხვა. თითოეული სტატიის/პროდუქტის ხელით შექმნა არაპრაქტიკულია; მონაცემებიდან გენერირება ავტომატური და ყოველთვის განახლებული. ## რატომ აქვს ეს მნიშვნელობა `ImageResponse` (API `next/og`) JSX+CSS-ს სოციალური გაზიარების სურათებად აქცევს მოთხოვნის დროს, ამიტომ ყველა დინამიური გვერდი შეიძლება ჰქონდეს შეზღუდული OG წინასწარი ნახვა დიზაინის კონვეიერის გარეშე. `opengraph-image.tsx` კონვენციის გაერთიანებით, ეს მკრთალო, მონაცემებით დაკავშირებული სოციალური წინასწარი ნახვებია — ბმულის დაჭერის რეალური წამწამი — ჩაშენებული, დაბალი-প্রচেষ্টা მახასიათებელი ხელის ნაცვლად ხელის მუშაობის ნაცვლად.