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

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

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

app/users/[id]/page.jsxlet users = [
  'user1',
  'user2',
  'user3',
  'user4',
  'user5',
];

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

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

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

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

src/app/test/page.jsxexport const generateMetadata = () => {
  return {
    title: '',
    description: '',
  };
};

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

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  console.log(params);
};

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

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Page for user {params.id}`,
    description: `Description for user "{users[params.id]}"`,
  };
};

page.jsxlet 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() {
  
}