Next.js의 Dynamic Metadata

Next.js는 메타데이터를 통해서 페이지의 제목을 보여준다.

메인 페이지처럼 하나의 제목만 있어도 되는 정적인 페이지는 원래대로 작성하면 된다.

export const metadata = {
  title: 'Home',
};

그런데 아이템에 따라 제목이 달라져야하는 경우에는 메타데이터를 어떻게 설정해야 할까?

---

Dynamic Metadata

예를 들어, 실습에서 movies/[id] 디렉토리에 있는 page.tsx는 API로 받아온 아이템의 id를 파라미터로 보내서, 그 id에 맞는 정보를 출력하라고 되어있다.

// movies/[id]/page.tsx

export default async function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  return (
    <>
      <Suspense fallback={<h2>Loading movie info..⌛</h2>}>
        <MovieInfo id={id} />
      </Suspense>
      <Suspense fallback={<h2>Loading movie videos..⌛</h2>}>
        <MovieVideos id={id} />
      </Suspense>
    </>
  );
}

이렇게 동적인 페이지에서 아이템에 맞게 제목이 변경되어야 하는 경우에는, 메타데이터로 페이지 제목을 설정할 때도 각 아이템의 id에 맞는 제목이 등장하도록 해야한다. 이를 위해서는 generateMetadata() 메서드를 사용한다.

generateMetadata()는 Next.js 13 이상에서 동적 페이지의 메타데이터를 설정하기 위해 사용하는 함수이다. 서버 사이드에서 실행되며, 페이지가 렌더링되기 전에 필요한 데이터를 기반으로 메타데이터를 동적으로 생성할 수 있다. 이 함수도 특정 아이템의 id를 파라미터로 보내서, id에 맞는 정보를 출력해주는 기능을 갖고 있다.

// generateMetadata()

export async function generateMetadata({ params: { id } }: IParams) {
  const movie = await getMovie(id);

  return {
    title: movie.title,
  };
}

---

이렇게 작성하면 movies/[id]/page.tsx의 전체 코드는 아래와 같이 된다.

generateMetadata()에서 movie info 컴포넌트에 있는 getMovie() 함수를 불러와서 사용하고, MovieDetail()의 return 내부에서 불러오는 <MovieInfo> 컴포넌트가 렌더링되는 과정에서 자신의 코드인 getMovie() 함수를 또 한번 사용하게 된다. 결국 fetch()로 API를 불러오는 getMovie() 함수가 2번 사용되는 것이다.

→ Next.js에서는 fetch()로 불러온 데이터가 캐싱되기 때문에, 처음 generateMetadata()에서 getMovie()를 사용할 때 데이터가 캐싱되고, <MovieInfo> 컴포넌트가 렌더링될 때는 캐시된 데이터가 출력되어 API가 호출되지 않는다.

// movie:id page

import { Suspense } from 'react';
import MovieInfo, { getMovie } from '../../../../components/movie-info';

interface IParams {
  params: { id: string };
}

export async function generateMetadata({ params: { id } }: IParams) {
  const movie = await getMovie(id);

  return {
    title: movie.title,
  };
}

export default async function MovieDetail({ params: { id } }: IParams) {
  return (
    <>
      <Suspense fallback={<h2>Loading movie info..⌛</h2>}>
        <MovieInfo id={id} />
      </Suspense>
    </>
  );
}

generateMetadata() 함수는 동적일 수 있는 메타데이터를 불러오기 위해 자동으로 호출되고, 페이지 컴포넌트에 제공되는 것이다. id라는 파라미터는 generateMetadata()와 페이지 컴포넌트에 동시에 제공된다.
generateMetadata() 함수를 사용할 때는 반드시 export 키워드를 사용해야 Next.js가 찾아낼 수 있다.