NextJS에서 콘텐츠로부터 메타데이터를 동적으로 전달하기

이전 강의에서 우리는 사이트 콘텐츠에 메타데이터를 설정하는 방법을 배웠습니다. 이 방법은 좋지만 항상 적용 가능한 것은 아닙니다. 문제는 페이지 메타데이터가 동적 라우트 매개변수에 따라 변할 수 있다는 점입니다.

예를 들어 살펴보겠습니다. 사용자의 id를 표시하기 위한 콘텐츠 파일이 있다고 가정해 봅시다. 이 파일에 사용자 배열이 있다고 가정합니다:

let users = [
	'user1',
	'user2',
	'user3',
	'user4',
	'user5',
];

전달된 매개변수에 해당하는 사용자 데이터를 출력해 봅시다:

export default function User({ params }) {
	return <>
		<h1>user {params.id}</h1>
		<p>
			name: {users[params.id]}
		</p>
	</>;
}

이제 우리의 문제로 돌아가겠습니다. 우리가 다른 사용자를 보여주고 있기 때문에, 그들에 대한 메타데이터도 달라야 합니다. 우리는 매개변수 값에 따라 동적으로 메타데이터를 생성해야 합니다.

이것은 특별한 함수 generateMetadata를 사용하여 수행됩니다. 이 함수는 우리 컴포넌트에서 내보내야 합니다:

export const generateMetadata = () => {
	return {
		title: '',
		description: '',
	};
};

이 함수에서는 라우트 매개변수에 액세스할 수 있습니다:

export const generateMetadata = ({params}) => {
	console.log(params);
};

매개변수 값에 따라 필요한 메타데이터를 반환하도록 해봅시다:

export const generateMetadata = ({params}) => {
	return {
		title: `Page for user {params.id}`,
		description: `Description for user "{users[params.id]}"`,
	};
};

/post/:id 형식의 주소를 처리하는 라우트를 만드세요. 여기서 :id 대신 어떤 숫자든 올 수 있습니다.

다음 배열이 주어졌다고 가정합니다:

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'description for post 1',
		text: 'text1 text1 text1 text1 text1 text1 text1 text1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'description for post 2',
		text: 'text2 text2 text2 text2 text2 text2 text2 text2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'description for post 3',
		text: 'text3 text3 text3 text3 text3 text3 text3 text3',
	},
];

export default function Post() {
	
}

주어진 ID에 따라 해당 포스트의 마크업이 출력되고, 올바른 타이틀과 메타 설명이 설정되도록 하세요.