Como você gera imagens Open Graph dinâmicas no Next.js?

Question

Accepted Answer

Next.js pode **gerar imagens de compartilhamento social (Open Graph) rapidamente** usando a API `ImageResponse` — renderizando JSX/CSS para PNG na borda. Isso oferece a cada página uma visualização de compartilhamento customizada sem criar imagens manualmente. ## Uma rota de imagem OG baseada em arquivo ```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 ); } ``` O nome de arquivo especial `opengraph-image.tsx` é automaticamente conectado aos metadados da página, então `` aponta para este PNG gerado. Cada postagem do blog obtém uma imagem única mostrando seu título e autor real. ## Como funciona nos bastidores ```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). ``` ## Geração programática (qualquer rota) ```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 }); } ``` ## Por que as imagens OG dinâmicas são importantes Uma imagem de compartilhamento atraente e específica de conteúdo aumenta dramaticamente a taxa de cliques quando links são postados em X, LinkedIn, Slack, Discord, etc. Criar manualmente uma por artigo/produto é impraticável; gerá-las a partir de dados é automático e sempre atualizado. ## Por que isso importa `ImageResponse` (a API `next/og`) converte JSX+CSS em imagens de compartilhamento em tempo de solicitação, de modo que cada página dinâmica possa ter uma visualização OG customizada sem um pipeline de design. Combinado com a convenção `opengraph-image.tsx`, torna as visualizações sociais ricas e orientadas por dados — um verdadeiro impulsionador de cliques em links — um recurso integrado e de baixo esforço em vez de uma tarefa manual.