Next.js 동적 메타데이터: 상품별 맞춤 OG 썸네일 생성
과거에는 index.html 파일 하나에 고정된 메타 태그를 적어두었습니다. 하지만 수만 개의 상품이 존재하는 커머스 사이트(예: 쇼핑몰)에서는 모든 상품의 제목, 사진, 가격이 제각각입니다. 이를 해결하기 위해 프론트엔드 개발자는 **서버사이드 렌더링(SSR)** 프레임워크를 활용해야 합니다.
⚡ Next.js 서버의 실시간 동적 메타데이터(Dynamic Metadata) 생성 과정
Next.js의 generateMetadata() 함수를 사용하면 사용자가 /product/99 경로에 접속하는 순간 서버가 DB에서 99번 상품 정보를 조회하여 고유한 <title>과 <meta> 태그를 주입해 줍니다. 나아가 ImageResponse 라이브러리(@vercel/og)를 활용하면, 디자인된 React 컴포넌트를 즉석에서 PNG 이미지 파일(오픈 그래프 썸네일)로 구워내어 반환할 수 있습니다. 수만 개의 썸네일 이미지를 디자이너가 일일이 만들 필요가 없어집니다!
// app/product/[id]/page.tsx
import { Metadata } from 'next';
// 1. URL의 [id] 값을 받아옵니다.
type Props = { params: { id: string } };
// 2. 페이지 렌더링 직전에 실행되는 동적 메타데이터 생성 함수
export async function generateMetadata({ params }: Props): Promise<Metadata> {
// 서버에서 DB 조회
const product = await fetchProductFromDB(params.id);
return {
title: `${product.name} | Minstudio 스토어`,
description: `${product.price}원에 만나보세요. ${product.summary}`,
openGraph: {
images: [
// 3. /api/og 라우트로 넘겨 동적 PNG 이미지를 생성합니다!
{ url: `https://store.app/api/og?title=${product.name}&price=${product.price}` }
],
},
};
}
export default function ProductPage({ params }: Props) {
return <div>상품 상세 화면</div>;
}