Jak generować dynamiczne obrazy Open Graph w Next.js?

Question

Accepted Answer

Next.js może **generować obrazy do udostępniania w mediach społecznościowych (Open Graph) w locie** za pomocą API `ImageResponse` — renderując JSX/CSS do PNG na krawędzi. To daje każdej stronie niestandardowy podgląd udostępniania bez ręcznego projektowania obrazów. ## Trasę obrazu OG opartą na plikach ```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 ); } ``` Specjalna nazwa pliku `opengraph-image.tsx` jest automatycznie powiązana z metadanymi strony, więc `` wskazuje na ten wygenerowany obraz PNG. Każdy wpis na blogu otrzymuje unikalny obraz wyświetlający jego rzeczywisty tytuł i autora. ## Jak to działa pod maską ```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). ``` ## Generowanie programowe (dowolna trasa) ```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 }); } ``` ## Dlaczego dynamiczne obrazy OG są ważne Atrakcyjny, zawartościowy obraz udostępniania dramatycznie zwiększa wskaźnik kliknięć, gdy linki są publikowane na X, LinkedIn, Slack, Discord itp. Ręczne tworzenie jednego na artykuł/produkt jest niepraktyczne; generowanie ich na podstawie danych jest automatyczne i zawsze aktualne. ## Dlaczego to ważne `ImageResponse` (API `next/og`) konwertuje JSX+CSS na obrazy udostępniania w czasie żądania, dzięki czemu każda dynamiczna strona może mieć dostosowany podgląd OG bez potoku projektowania. W połączeniu z konwencją `opengraph-image.tsx`, tworzy bogatą, napędzaną danymi podglądy społeczne — rzeczywisty sterownik kliknięć na linki — wbudowaną, niskowysiłkową funkcję zamiast ręcznej pracy.