Kako generirate dinamičke Open Graph slike u Next.js?

Question

Accepted Answer

Next.js može **generirati slike za dijeljenje na društvenim mrežama (Open Graph) u letu** koristeći `ImageResponse` API — prikazivanjem JSX/CSS kao PNG na rubnoj jedinici. To svakoj stranici daje prilagođeni pregled dijeljenja bez ručnog oblikovanja slika. ## Zašto je to važno ```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 ); } ``` Specijalni naziv datoteke `opengraph-image.tsx` automatski je povezan s metapodacima stranice, pa `` pokazuje na ovu generiranu PNG. Svaka blog objava dobija jedinstvenu sliku koja prikazuje stvarni naslov i autora. ## Kako funkcionira ispod poklopca ```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). ``` ## Programatska generacija (bilo koja ruta) ```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 }); } ``` ## Zašto su dinamičke OG slike važne Privlačna, sadržaju specifična slika za dijeljenje dramatično povećava prolaz klikova kada se veze objavljuju na X, LinkedIn, Slack, Discord, itd. Ručno stvaranje po članka/proizvoda je nepraktično; generiranje iz podataka je automatsko i uvijek ažurirano. ## Zašto je to važno `ImageResponse` (API `next/og`) pretvara JSX+CSS u slike za dijeljenje u vremenu zahtjeva, tako da svaka dinamička stranica može imati prilagođeni OG pregled bez cjevovoda dizajna. U kombinaciji s konvencijom `opengraph-image.tsx`, ona stvara bogate, podatcima vođene preglede društvenih mreža — pravi pokretač prolaska klikova na veze — ugrađenu, niskozahtjevnu značajku umjesto ručnog posla.