generateMetadata()는 Next.js App Router에서 라우트 파라미터나 데이터에 따라 title, description, Open Graph(OG) 같은 메타데이터를 동적으로 만드는 서버 함수다. 값이 고정이면 export const metadata = { … }로 충분하다.
export async function generateMetadata(
{ params }: { params: Promise<{ id: string }> },
): Promise<Metadata> {
const { id } = await params // 15부터 params는 Promise
const { name: title, summary: description, thumbnail } = await getProduct(id)
return {
title,
description,
openGraph: { title, images: [thumbnail] },
}
}- 페이지와 같은 데이터를 다시 불러도 된다. 같은
fetch는 한 요청 안에서 한 번만 실행된다. fetch가 아닌 조회는 React.cache로 감싼다(Next.js 캐시 계층) - 상속: 레이아웃의 title 값을
{ template: '%s | 사이트명', default: '사이트명' }객체로 두면 하위 페이지가 title로 준'상품 상세'가상품 상세 | 사이트명이 된다. 하위에서 같은 키를 다시 내보내면 덮어쓴다 - 두 번째 인자
parent(ResolvingMetadata)로 상위 메타데이터를 읽어 확장할 수 있다(예: 부모의 OG 이미지 뒤에 추가) - Open Graph·Twitter 카드는 SNS(Social Networking Service) 공유 미리보기 태그(
og:title,og:image)가 된다 - 서버 컴포넌트에서만 내보낼 수 있다.
'use client'파일에서는 에러다 generateStaticParams와 헷갈리지 않는다. 그쪽은 빌드 때 미리 만들 경로 목록을 정한다(CSR·SSR·SSG·ISR)
검색엔진과 공유 미리보기는 서버 HTML(HyperText Markup Language)에 태그가 있어야 읽으므로 서버 렌더가 필요하다. 링크를 공유할 때 따라가는 출처 정보는 Origin·Referer 헤더와 Referrer-Policy 참고.