Next.js에서 동적 Open Graph 이미지는 어떻게 생성하나요?

Question

Accepted Answer

Next.js는 `ImageResponse` API를 사용해 **소셜 공유(Open Graph) 이미지를 즉석에서 생성**할 수 있습니다. JSX/CSS를 엣지에서 PNG로 렌더링하죠. 이를 통해 손으로 이미지를 디자인하지 않고도 모든 페이지가 맞춤형 공유 미리보기를 갖게 됩니다. ## 파일 기반 OG 이미지 라우트 ```tsx // app/blog/[slug]/opengraph-image.tsx import { ImageResponse } from "next/og"; export const size = { width: 1200, height: 630 }; // 표준 OG 치수 export const contentType = "image/png"; export default async function OGImage({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // 이 페이지의 실제 데이터 페칭 return new ImageResponse( ( // CSS 서브셋(flexbox)으로 스타일된 JSX를 이미지로 렌더링

{post.title}

{post.author}

), size ); } ``` 특수 파일명 `opengraph-image.tsx`는 페이지의 메타데이터에 자동으로 연결되므로 ``가 이 생성된 PNG를 가리킵니다. 각 블로그 글은 실제 제목과 저자를 보여 주는 고유한 이미지를 얻습니다. ## 내부 동작 방식 ```text ImageResponse는 Satori 사용 → JSX + (flexbox) CSS → SVG → PNG로 변환. Edge 런타임에서 실행 → 빠른 생성, 캐싱 가능. 커스텀 폰트, 이미지, 그라데이션 지원 (전체 CSS가 아닌 CSS 서브셋). ``` ## 프로그래밍 방식 생성 (모든 라우트) ```tsx // app/api/og/route.tsx — query param에서 생성 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`(`next/og` API)는 JSX+CSS를 요청 시점에 공유 이미지로 바꿔 주므로, 모든 동적 페이지가 디자인 파이프라인 없이 맞춤형 OG 미리보기를 가질 수 있습니다. `opengraph-image.tsx` 컨벤션과 결합하면, 풍부하고 데이터 기반인 소셜 미리보기 — 링크 클릭률의 실질적 동인 — 를 수동 작업이 아니라 내장된 저비용 기능으로 만들어 줍니다.