Bagaimana anda menjana imej Open Graph dinamik dalam Next.js?

Question

IT Interview Practice · Accepted Answer

Next.js boleh **menjana imej media sosial (Open Graph) dengan serta-merta** menggunakan API `ImageResponse` — melukis JSX/CSS kepada PNG di tepi. Ini memberikan setiap halaman pratonton perkongsian tersuai tanpa merancang imej dengan tangan. ## Laluan imej OG berasaskan fail ```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 fail khas `opengraph-image.tsx` secara automatik bersambung ke metadata halaman, jadi `` menunjuk kepada PNG yang dijana ini. Setiap catatan blog mendapat imej unik yang menunjukkan tajuk dan pengarang sebenarnya. ## Bagaimana ia berfungsi di bawah bonet ```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). ``` ## Penjanaan beraturcara (mana-mana laluan) ```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 imej OG dinamik penting Imej perkongsian yang menarik dan khusus untuk kandungan meningkatkan klik-terus secara dramatik apabila pautan disiarkan di X, LinkedIn, Slack, Discord, dsb. Membuat satu secara manual bagi setiap artikel/produk tidak praktikal; menjananya daripada data adalah automatik dan sentiasa terkini. ## Mengapa ia penting `ImageResponse` (API `next/og`) menukar JSX+CSS kepada imej perkongsian pada masa permintaan, jadi setiap halaman dinamik boleh mempunyai pratonton OG tersuai tanpa saluran reka bentuk. Dikombinasikan dengan konvensyen `opengraph-image.tsx`, ia memberikan pratonton media sosial yang kaya dan didorong data — penggerak sebenar bagi klik-terus pautan — sebagai ciri terbina dan usaha rendah dan bukannya tugas manual.

Laluan imej OG berasaskan fail

Bagaimana ia berfungsi di bawah bonet

Penjanaan beraturcara (mana-mana laluan)

Mengapa imej OG dinamik penting

Mengapa ia penting

Soalan berkaitan