[id] 폴더 내의 페이지에서 파라미터를 설정한 후 title을 설정한다.
interface IParams {
params: {
id:string
};
}
export async function generateMetadata({params:{id}}: IParams) {
const movie = await getMovie(id);
return {
title: movie.title,
};
}
여기서 generateMetadata
함수는 fetching 할 수 있게하는 함수이다.
동적인 제목을 갖고 있는 페이지를 위해 존재한다.
-> Hoem의 page는 정적이지만, [id] page의 meta data는 동적으로 바뀌어야 한다.
getMovie
함수의 경우 다른 컴포넌트에서도 호출되므로 재호출 걱정이 생길 수 있지만,
캐싱되기 때문에 gerMovie
가 두 번 호출되는 것은 나쁜 것이 아니다.
다음과 같이 정상적으로 상단바에 metadata, title이 영화 이름별로 동적으로 설정되는 것을 확인할 수 있다.