คุณสร้างรูปภาพ Open Graph แบบไดนามิกใน Next.js ได้อย่างไร

Question

Accepted Answer

Next.js สามารถ **สร้างรูปภาพการแชร์โซเชียล (Open Graph) แบบไดนามิก** โดยใช้ API `ImageResponse` — การเรนเดอร์ 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 แบบไดนามิกจึงมีความสำคัญ รูปภาพแชร์ที่น่าสนใจและเฉพาะเนื้อหา จะเพิ่มอัตราการคลิก (click-through) อย่างมากเมื่อเชื่อมโยงถูกโพสต์บน X, LinkedIn, Slack, Discord เป็นต้น การสร้างรูปภาพด้วยมือสำหรับแต่ละบทความ/สินค้าเป็นไปไม่ได้ การสร้างจากข้อมูลเป็นแบบอัตโนมัติและอัปเดตอยู่เสมอ ## เหตุใดจึงมีความสำคัญ `ImageResponse` (API `next/og`) แปลง JSX+CSS เป็นรูปภาพแชร์ในเวลาที่มีการร้องขอ ดังนั้นทุกหน้าแบบไดนามิกจึงสามารถมีตัวอย่าง OG ที่ปรับแต่งได้โดยไม่ต้องมีกระบวนการออกแบบ เมื่อรวมกับ convention `opengraph-image.tsx` จะทำให้ตัวอย่างการโพสต์โซเชียลที่มีความซับซ้อนและใช้ข้อมูล — ตัวขับเคลื่อนจริงสำหรับการคลิกลิงก์ — กลายเป็นฟีเจอร์ในตัว ต้องใช้ความพยายามน้อย แทนที่จะเป็นงานที่ต้องทำด้วยมือ