Next.js'de dinamik Open Graph görselleri nasıl oluşturursunuz?

Question

Accepted Answer

Next.js, `ImageResponse` API'sini kullanarak **sosyal paylaşım (Open Graph) görsellerini dinamik olarak oluşturabilir** — JSX/CSS'yi kenarında PNG'ye dönüştürerek. Bu, her sayfaya görselleri elle tasarlamadan özel bir paylaşım önizlemesi sağlar. ## Dosya tabanlı OG görsel rotası ```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 ); } ``` Özel dosya adı `opengraph-image.tsx` otomatik olarak sayfanın meta verilerine bağlanır, bu nedenle `` bu oluşturulan PNG'yi işaret eder. Her blog yazısı gerçek başlık ve yazarını gösteren benzersiz bir görsel alır. ## İçinde nasıl çalışır ```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). ``` ## Programatik üretim (herhangi bir 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 }); } ``` ## Dinamik OG görselleri neden önemlidir İkna edici, içeriğe özgü bir paylaşım görseli, X, LinkedIn, Slack, Discord vb. üzerinde bağlantılar paylaşıldığında tıklanma oranını çarpıcı biçimde artırır. Makale/ürün başına el ile bir tane oluşturmak pratik değildir; verileri oluşturmak otomatik ve her zaman günceldir. ## Neden önemli `ImageResponse` (`next/og` API), JSX+CSS'yi istek zamanında paylaşım görsellerine dönüştürür, bu nedenle her dinamik sayfa tasarım ardışık işlemi olmadan uyarlanmış bir OG önizlemesine sahip olabilir. `opengraph-image.tsx` kuralı ile birleştirildiğinde, zengin, veriye dayalı sosyal önizlemeler — bağlantı tıklanması oranının gerçek bir itici gücü — yerleşik, düşük çaba gerektiren bir özellik haline gelir ve elle yapılan işin yerine geçer.