Kako generirate dinamične Open Graph slike v Next.js?

Question

Accepted Answer

Next.js lahko **generirate slike za družabne omrežje (Open Graph) dinamično** z API-jem `ImageResponse` — s prikrojanjem JSX/CSS v PNG na robu. To daje vsaki strani prikaz deljenja po meri brez ročnega oblikovanja slik. ## Smernica za datoteke OG slik ```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 ); } ``` Posebno ime datoteke `opengraph-image.tsx` je samodejno povezano s podatki strani, zato `` kaže na to generirano PNG. Vsak blog prispevek dobi edinstveno sliko s pravim naslovom in avtorjem. ## Kako deluje pod pokrovom ```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). ``` ## Programmatska generacija (katera koli smernica) ```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 }); } ``` ## Zakaj so dinamične slike OG pomembne Prepričljiva, vsebinski specifična slika deljenja dramatično poveča klike skozi, ko so povezave objavljene na X, LinkedIn, Slack, Discord itd. Ročno ustvarjanje ene na članek/proizvod je nepraktično; njihova generacija iz podatkov je samodejne in vedno posodobljene. ## Zakaj je to pomembno `ImageResponse` (API `next/og`) JSX+CSS spremeni v slike za deljenje ob času zahteve, zato ima lahko vsaka dinamična stran prilagojen prikaz OG brez oblikovalske pipeline. Skupaj s pogodbo `opengraph-image.tsx` so bogate, podatkami voden družabne predoglede — pravi pogon za klike povezav — vgrajena, lahka funkcija namesto ročnega dela.