[Next.js] 메타데이터(Metadata)

Next.js에서는 메타데이터(Metadata)를 설정하는 두 가지 방법이 있다.

설정 기반 메타데이터(Config-based Metadata)와 파일 기반 메타데이터(File-based Metadata)가 그 방법이다. 이번 강의에서는 설정 기반 메타데이터를 중심으로 학습을 진행하였다.

설정 기반 메타데이터 방식에는 정적 방식(Static Metadata)과 동적 방식(Dynamic Metadata)이 있다.

정적 메타데이터

정적 방식은 Metadata 객체를 정의하는 방식이다.

// layout.tsx 혹은 page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
	title: '...',
	description: '...',
}

export default function Page() {}

동적 메타데이터

동적 방식은 generateMetadata라는 함수를 이용해 동적으로 Metadata 객체를 생성하는 방식이다.

// app/blog/[id]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next';

type Props = {
	params: { id: string }
	searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
	{ params, searchParams }: Props,
	parent?: ResolvingMetadata
): Promise<Metadata> {
	const id = params.id

	const post = await fetch(`https://.../${id}`).then((res) => res.json())

	const previousImages = (await parent).openGraph?.images || []

	return {
		title: post.title,
		openGraph: {
			images: ['/some-specific-page-image.jpg', ...previousImages],
		},
	}
}

export default function Page({ params, searchParams }: Props) {}