Cum generezi imagini Open Graph dinamice în Next.js?

Question

Accepted Answer

Next.js poate **genera imagini pentru partajare pe rețele sociale (Open Graph) pe loc** folosind API-ul `ImageResponse` — renderând JSX/CSS la un PNG la margine. Aceasta oferă fiecărei pagini o previzualizare de partajare personalizată fără a proiecta manual imagini. ## O rută de imagine OG bazată pe fișier ```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 ); } ``` Numele de fișier special `opengraph-image.tsx` este conectat automat la metadatele paginii, deci `` indică către acest PNG generat. Fiecare articol de blog primește o imagine unică arătând titlul și autorul real al acestuia. ## Cum funcționează din spatele cortinei ```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). ``` ## Generare programatică (orice rută) ```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 }); } ``` ## De ce sunt importante imaginile OG dinamice O imagine de partajare atrăgătoare și specifică pentru conținut crește dramatic rata de clic atunci când linkurile sunt postate pe X, LinkedIn, Slack, Discord, etc. Crearea manuală a uneia per articol/produs este impracticabilă; generarea lor din date este automată și întotdeauna actualizată. ## De ce este important `ImageResponse` (API-ul `next/og`) transformă JSX+CSS în imagini de partajare la timp de cerere, deci fiecare pagină dinamică poate avea o previzualizare OG personalizată fără un pipeline de design. Combinată cu convenția `opengraph-image.tsx`, aceasta face previzualizări sociale bogate și conduse de date — un adevărat factor de clic pe linkuri — o caracteristică încorporată și cu efort redus, mai degrabă decât o sarcină manuală.