Как создавать динамические изображения Open Graph в Next.js?

Question

IT Interview Practice · Accepted Answer

Next.js может **генерировать изображения для социальных сетей (Open Graph) на лету** с помощью API `ImageResponse` — отрисовывая JSX/CSS в PNG на edge. Это дает каждой странице пользовательский предпросмотр для совместного использования без ручного проектирования изображений. ## Маршрут изображения OG на основе файлов ```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 ); } ``` Специальное имя файла `opengraph-image.tsx` автоматически привязывается к метаданным страницы, поэтому `` указывает на этот созданный PNG. Каждый пост в блоге получает уникальное изображение, отображающее его реальное название и автора. ## Как это работает под капотом ```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). ``` ## Программная генерация (любой маршрут) ```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 }); } ``` ## Почему динамические изображения OG важны Привлекательное, ориентированное на контент изображение для совместного использования резко повышает количество кликов, когда ссылки публикуются на X, LinkedIn, Slack, Discord и т.д. Ручное создание одного изображения на статью/продукт нецелесообразно; их создание на основе данных происходит автоматически и всегда актуально. ## Почему это важно `ImageResponse` (API `next/og`) преобразует JSX+CSS в изображения для совместного использования во время запроса, поэтому каждая динамическая страница может иметь пользовательский предпросмотр OG без конвейера дизайна. Вместе с соглашением `opengraph-image.tsx` это превращает богатые, управляемые данными социальные предпросмотры — реальный движитель кликов по ссылкам — во встроенную, малозатратную функцию, а не в ручную работу.

Маршрут изображения OG на основе файлов

Как это работает под капотом

Программная генерация (любой маршрут)

Почему динамические изображения OG важны

Почему это важно

Похожие вопросы