Bạn sinh ảnh Open Graph động trong Next.js như thế nào?

Question

Accepted Answer

Next.js có thể **sinh ảnh chia sẻ mạng xã hội (Open Graph) on the fly** dùng API `ImageResponse` — render JSX/CSS thành một PNG ở edge. Điều này cho mỗi trang một bản xem trước chia sẻ tùy biến mà không cần thiết kế ảnh bằng tay. ## Một route ảnh OG dựa trên file ```tsx // app/blog/[slug]/opengraph-image.tsx import { ImageResponse } from "next/og"; export const size = { width: 1200, height: 630 }; // kích thước OG chuẩn export const contentType = "image/png"; export default async function OGImage({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // fetch dữ liệu thật cho trang này return new ImageResponse( ( // JSX style bằng một tập con của CSS (flexbox), render thành ảnh

{post.title}

{post.author}

), size ); } ``` Tên file đặc biệt `opengraph-image.tsx` được tự động nối vào metadata của trang, nên `` trỏ tới PNG được sinh này. Mỗi bài blog có một ảnh riêng hiển thị title và tác giả thật của nó. ## Nó hoạt động như thế nào ở bên dưới ```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). ``` ## Sinh theo lập trình (bất kỳ route nào) ```tsx // app/api/og/route.tsx — sinh từ 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 }); } ``` ## Vì sao ảnh OG động quan trọng Một ảnh chia sẻ hấp dẫn, đặc thù theo nội dung làm tăng đáng kể tỉ lệ click khi link được đăng lên X, LinkedIn, Slack, Discord, v.v. Tự tạo một ảnh cho mỗi bài viết/sản phẩm là không thực tế; sinh chúng từ dữ liệu là tự động và luôn cập nhật. ## Tại sao điều này quan trọng `ImageResponse` (API `next/og`) biến JSX+CSS thành ảnh chia sẻ lúc request, nên mỗi trang động có thể có một bản xem trước OG được may đo mà không cần một pipeline thiết kế. Kết hợp với quy ước `opengraph-image.tsx`, nó biến các bản xem trước mạng xã hội phong phú, dựa trên dữ liệu — một động lực thực sự cho tỉ lệ click link — thành một tính năng sẵn có, ít công sức thay vì một việc thủ công.