Bagaimana Anda membuat gambar Open Graph dinamis di Next.js?

Question

Accepted Answer

Next.js dapat **membuat gambar berbagi-sosial (Open Graph) secara dinamis** menggunakan API `ImageResponse` — merender JSX/CSS ke PNG di edge. Ini memberikan setiap halaman pratinjau berbagi khusus tanpa merancang gambar dengan tangan. ## Mengapa ini penting ```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 ); } ``` Nama file khusus `opengraph-image.tsx` secara otomatis terhubung ke metadata halaman, sehingga `` menunjuk ke PNG yang dihasilkan ini. Setiap posting blog mendapatkan gambar unik yang menampilkan judul dan penulis sebenarnya. ## Cara kerjanya di balik layar ```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). ``` ## Generasi programatis (rute apa pun) ```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 }); } ``` ## Mengapa gambar OG dinamis penting Gambar berbagi yang menarik dan spesifik konten secara dramatis meningkatkan click-through saat tautan diposting di X, LinkedIn, Slack, Discord, dll. Membuat satu secara manual per artikel/produk tidak praktis; membuatnya dari data bersifat otomatis dan selalu terbaru. ## Mengapa ini penting `ImageResponse` (API `next/og`) mengubah JSX+CSS menjadi gambar berbagi pada saat permintaan, sehingga setiap halaman dinamis dapat memiliki pratinjau OG yang disesuaikan tanpa saluran desain. Dikombinasikan dengan konvensi `opengraph-image.tsx`, ini membuat pratinjau sosial yang kaya dan didorong data — pendorong klik tautan yang sebenarnya — fitur bawaan yang mudah daripada pekerjaan manual.