¿Cómo generas imágenes Open Graph dinámicas en Next.js?

Question

Accepted Answer

Next.js puede **generar imágenes de redes sociales (Open Graph) sobre la marcha** usando la API `ImageResponse` — renderizando JSX/CSS a PNG en el edge. Esto le da a cada página una vista previa personalizada para compartir sin diseñar imágenes manualmente. ## Una ruta de imagen OG basada en archivos ```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 ); } ``` El nombre de archivo especial `opengraph-image.tsx` se conecta automáticamente a los metadatos de la página, por lo que `` apunta a este PNG generado. Cada publicación de blog obtiene una imagen única que muestra su título y autor reales. ## Cómo funciona internamente ```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). ``` ## Generación programática (cualquier 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 }); } ``` ## Por qué las imágenes OG dinámicas importan Una imagen para compartir atractiva y específica del contenido aumenta dramáticamente el número de clics cuando los enlaces se publican en X, LinkedIn, Slack, Discord, etc. Crear uno manualmente por artículo/producto es impractico; generarlos a partir de datos es automático y siempre está actualizado. ## Por qué es importante `ImageResponse` (la API `next/og`) convierte JSX+CSS en imágenes para compartir en tiempo de solicitud, para que cada página dinámica pueda tener una vista previa de OG personalizada sin un canal de diseño. Combinado con la convención `opengraph-image.tsx`, crea vistas previas sociales ricas y basadas en datos — un impulsor real de clics en enlaces — una función integrada y de bajo esfuerzo en lugar de una tarea manual.