generateMetadata
메타데이터는 metadata 객체 또는 generateMetadata 함수를 통해 정의할 수 있다.
metadata 객체 (정적 메타데이터)
정적 메타데이터를 정의할 때는 layout.tsx 또는 page.tsx에서 Metadata 객체를 내보낸다.
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
}
export default function Page() {}지원되는 전체 옵션 목록은 메타데이터 필드 문서를 참고한다.
generateMetadata 함수 (동적 메타데이터)
현재 경로 파라미터, 외부 데이터, 상위 세그먼트 등 동적 정보에 따라 메타데이터가 달라질 경우, Metadata 객체를 반환하는 generateMetadata 함수를 내보내 설정한다.
메타데이터 처리는 페이지 렌더링 과정의 일부다. 페이지를 사전 렌더링할 수 있고 generateMetadata가 동적 동작을 유발하지 않는 경우, 생성된 메타데이터는 페이지의 초기 HTML에 포함된다. 그렇지 않으면 초기 UI 전송 이후 확인된 메타데이터를 스트리밍 방식으로 전달할 수 있다.
app/products/[id]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: Promise<{ id: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// 경로 파라미터 추출
const { id } = await params
// 데이터 패칭
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// 상위 메타데이터를 덮어쓰지 않고 확장할 수 있다.
const previousImages = (await parent).openGraph?.images || []
return {
title: product.title,
openGraph: {
images: ['/some-specific-page-image.jpg', ...previousImages],
},
}
}
export default function Page({ params, searchParams }: Props) {}pages와 layouts에서 자동완성을 활용하려면 첫 번째 인수에 각각 PageProps<'/route'>, LayoutProps<'/route'>를 타입으로 지정하면 된다.
참고 사항
- 메타데이터는
layout.js와page.js파일 모두에 추가할 수 있다. - Next.js는 메타데이터를 자동으로 해석하여 페이지에 필요한
<head>태그를 생성한다. metadata객체와generateMetadata함수는 서버 컴포넌트에서만 사용할 수 있다.- 동일한 경로 세그먼트에서
metadata객체와generateMetadata함수를 동시에 내보낼 수 없다. generateMetadata,generateStaticParams, 레이아웃, 페이지, 서버 컴포넌트 전반에서 동일한 데이터에 대한fetch요청은 자동으로 메모이제이션된다.fetch를 사용할 수 없는 환경에서는 Reactcache를 대신 활용할 수 있다.- 파일 기반 메타데이터는
metadata객체 및generateMetadata함수보다 높은 우선순위를 가진다.
