Piye carane ngasilake gambar Open Graph dinamis ing Next.js?

Question

Accepted Answer

Next.js bisa **ngasilake gambar sosial-share (Open Graph) ing-the-fly** nggunakake API `ImageResponse` — rendering JSX/CSS menyang PNG ing edge. Iki menehi saben kaca pratinjau bagean custom tanpa desain gambar kanthi manual. ## Jalur gambar OG adhedhasar file ```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 ); } ``` Naran file khusus `opengraph-image.tsx` otomatis konekan menyang metadata kaca, mula `` nuding PNG sing dihasilake iki. Saben posting blog entuk gambar unik sing nuduhake judhul lan penulis nyata. ## Piye cara kerjane ing mburi 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 programatik (jalur apa wae) ```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 }); } ``` ## Napa gambar OG dinamis iku penting Gambar bagean isi sing menarik sacara dramatis nambah klik nalika pranala dipajang ing X, LinkedIn, Slack, Discord, lsp. Nggawe siji-siji kanggo saben artikel/produk ora praktis; ngasilake saka data otomatis lan tansaya anyar. ## Napa iku penting `ImageResponse` (API `next/og`) ngrubah JSX+CSS dadi gambar bagean ing wektu panjalukan, mula saben kaca dinamis bisa duwe pratinjau OG kang disesuaikan tanpa jalur desain. Dimangerthi karo konvensi `opengraph-image.tsx`, iku nduweni pratinjau sosial sing sugih lan berdasarake data — dorongan nyata saka klik pranala — minangka fitur sing wis dibangun lan keperluan kurang kasir tinimbang tugas manual.