Jak v Next.js generujete dynamické obrázky Open Graph?

Question

Accepted Answer

Next.js může **generovat obrázky sociálních médií (Open Graph) za běhu** pomocí `ImageResponse` API — vykreslení JSX/CSS na PNG na hranici. To dává každé stránce vlastní náhled sdílení bez ruční tvorby obrázků. ## Trasování obrázku OG založené na souborech ```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 ); } ``` Speciální název souboru `opengraph-image.tsx` je automaticky zapojen do metadat stránky, takže `` odkazuje na tento vygenerovaný PNG. Každý příspěvek na blogu získá jedinečný obrázek s jeho skutečným názvem a autorem. ## Jak to funguje ```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). ``` ## Programatická generace (jakákoli cesta) ```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 }); } ``` ## Proč záleží na dynamických obrázcích OG Poutavý, obsahu specifický obrázek pro sdílení dramaticky zvyšuje počet kliknutí, když jsou odkazy zveřejněny na X, LinkedIn, Slack, Discord atd. Ruční vytváření jednoho na článek/produkt je nepraktické; jejich generování z dat je automatické a vždy aktuální. ## Proč to záleží `ImageResponse` (API `next/og`) změní JSX+CSS na obrázky ke sdílení v čase požadavku, takže každá dynamická stránka může mít přizpůsobenou OG náhled bez návrhového kanálu. Spojeno s konvencí `opengraph-image.tsx`, to vytváří bohaté, řízené daty sociální náhledy — skutečný hnací prvek kliknutí na odkazy — vestavěnou, nízkozátěžovou funkci místo ručního úkolu.