كيف تولد صور 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` (واجهة `next/og` API) تحول JSX+CSS إلى صور مشاركة وقت الطلب، بحيث يمكن لكل صفحة ديناميكية أن تحتوي على معاينة OG مخصصة دون خط أنابيب تصميم. مدمجة مع اتفاقية `opengraph-image.tsx`، فهي تحقق معاينات اجتماعية غنية تعتمد على البيانات — وهي محرك حقيقي لنقرات الروابط — كميزة مدمجة منخفضة الجهد بدلاً من عمل يدوي.