Kaip generuoti dinaminius Open Graph vaizdus Next.js?

Question

Accepted Answer

Next.js gali **generuoti socialiųjų medžiagų pasikeitimų (Open Graph) vaizdus iš karto**, naudojant `ImageResponse` API — renderinant JSX/CSS į PNG krašte. Tai suteikia kiekvienam puslapiui pasirinktinę pasikeitimo peržiūrą be rankiniu vaizdų kūrimo. ## Failų pagrindu sudaryta OG vaizdo kelias ```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 ); } ``` Specialus failo pavadinimas `opengraph-image.tsx` automatiškai susietas su puslapio metaduomenimis, todėl `` nurodo šį sugeneruotą PNG. Kiekvienas tinklaraščio įrašas gauna unikalų vaizdą, kuriame rodomas tikrasis pavadinimas ir autorius. ## Kaip jis veikia po to ```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). ``` ## Programinis generavimas (bet koks kelias) ```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 }); } ``` ## Kodėl dinaminiai OG vaizdai yra svarbūs Paramagus, turinį atitinkantis pasikeitimo vaizdas žymiai padidina spragtelėjimų skaičių, kai nuorodos skelbiamos X, LinkedIn, Slack, Discord ir kt. Rankiniu būdu kurti po vieną kiekvienam straipsniui/produktui nepraktika; generavimas iš duomenų yra automatinis ir visada naujas. ## Kodėl tai svarbu `ImageResponse` (API `next/og`) paverčia JSX+CSS į pasikeitimo vaizdus užklausos metu, todėl kiekvienas dinaminis puslapis gali turėti pritaikytą OG peržiūrą be dizaino konvejero. Suderinus su `opengraph-image.tsx` konvencija, tai suteikia turtingus, duomenimis paremtus socialiųjų medžiagų peržiūras — tikrą nuorodos spragtelėjimų variklį — kaip integruotą, mažos pastangos funkciją, o ne rankinę užduotį.