Come generi immagini Open Graph dinamiche in Next.js?

Question

Accepted Answer

Next.js può **generare immagini di social-share (Open Graph) al volo** utilizzando l'API `ImageResponse` — renderizzando JSX/CSS a PNG edge. Questo fornisce a ogni pagina un'anteprima di condivisione personalizzata senza dover progettare le immagini manualmente. ## Percorso di immagine OG basato su file ```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 ); } ``` Il nome file speciale `opengraph-image.tsx` è automaticamente collegato ai metadati della pagina, quindi il `` punta a questo PNG generato. Ogni articolo del blog ottiene un'immagine unica che mostra il titolo e l'autore effettivi. ## Come funziona sotto il cofano ```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). ``` ## Generazione programmatica (qualsiasi percorso) ```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 }); } ``` ## Perché le immagini OG dinamiche sono importanti Un'immagine di condivisione accattivante e specifica per il contenuto aumenta drammaticamente il click-through quando i link vengono pubblicati su X, LinkedIn, Slack, Discord, ecc. Creare manualmente uno per ogni articolo/prodotto non è pratico; generarli dai dati è automatico e sempre aggiornato. ## Perché è importante `ImageResponse` (l'API `next/og`) trasforma JSX+CSS in immagini di condivisione al momento della richiesta, quindi ogni pagina dinamica può avere un'anteprima OG personalizzata senza una pipeline di progettazione. Combinato con la convenzione `opengraph-image.tsx`, offre anteprime social ricche e basate sui dati — un vero driver del click-through dei link — come funzionalità integrata e a basso sforzo piuttosto che come un compito manuale.