[next.js] Dynamic Metadata 생성하기

generateMetadata() 함수를 이용하여 동적인 메타데이터를 만들 수 있다.

interface Params {
  params: {
    userId: string;
  };
}

export const generateMetadata = async ({
  params: { userId },
}: Params): Promise<Metadata> => {
  // the same request will be deduplicated.
  const userData = getUser(userId);
  const user = await userData;

  return {
    title: user.name,
    description: `This is the page of ${user.name}`,
  };
};

const UserPage = async ({ params: { userId } }: Params) => {
  const userData = getUser(userId);
	...

위 코드는 params에서 userId를 받아서 동적라우팅을 하는 컴포넌트이다. 여기서 export const generateMetadata = async() ⇒ {} 함수를 사용하여 user 데이터를 요청하고 리턴값으로 메타데이터를 내보내면 된다.

주의할 점은 함수명을 꼭 generateMetadata로 써야 작동한다는 것이고, 코드를 잘 보면 const userData = getUser(userId);를 위에도 쓰고 밑에도 쓰는 것을 볼 수 있는데, 이는 next에서 자동으로 중복되는 요청을 없애기 때문에 신경쓰지 않아도 된다.