[NextJS] 동적 MetaData

[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이 영화 이름별로 동적으로 설정되는 것을 확인할 수 있다.