Dynamic Metadata

2025.1.15 수요일의 공부기록

Next.js에서는 Dynamic Metadata를 통해 동적으로 생성되는 페이지의 메타데이터를 설정할 수 있다.
Dynamic Metadata는 서버 컴포넌트에서만 사용할 수 있으며, 페이지별로 SEO를 최적화하는 데 유용하다.

---

Dynamic Metadata의 특징

1. 서버 컴포넌트 전용

   • 메타데이터 객체(metadata)와 generateMetadata 함수는 서버 컴포넌트에서만 지원된다.
   • 클라이언트 컴포넌트에서는 사용할 수 없다.

2. metadata와 generateMetadata의 상호 배타성

   • 동일한 경로에서 metadata 객체와 generateMetadata 함수를 동시에 사용할 수 없다.
   • 둘 중 하나만 사용 가능하다.

3. SEO 최적화

   • 동적으로 생성되는 콘텐츠에 적합한 메타데이터를 생성하여 검색 엔진 최적화(SEO)에 유리하다.

---

generateMetadata 함수 사용법

generateMetadata 함수는 동적으로 메타데이터를 생성하며, 비동기로 데이터 Fetching을 처리할 수 있다.

파일 구조 예시

app/
├── (movies)/
│   └── movies/
│       └── [id]/
│           └── page.tsx

실습 코드

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

type Props = {
  params: { id: string };
  searchParams: { region: string; page: string };
};

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

// 동적 메타데이터 생성
export async function generateMetadata({ params: { id } }: IParams) {
  const movie = await getMovie(id); // id를 기반으로 영화 데이터를 가져옴
  return {
    title: movie.title, // 페이지 제목 설정
  };
}

export default async function MovieDetail({ params }: IParams) {
  const { id } = params;

  return (
    <div>
      {/* MovieInfo 로드 */}
      <Suspense fallback={<h1>Loading movie info</h1>}>
        <MovieInfo id={id} />
      </Suspense>

      {/* MovieVideos 로드 */}
      <Suspense fallback={<h1>Loading movie videos</h1>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}

1) generateMetadata 함수

• 역할:
  id를 기반으로 동적으로 영화 데이터를 가져와 메타데이터를 생성한다.

• 예시 동작:

  • /movies/1으로 접근 시, getMovie(1) 호출로 영화 데이터를 가져온 뒤 title 값을 메타데이터로 설정한다.

• 결과:

  {
    "title": "Movie Title from API"
  }

2) MovieDetail 컴포넌트

• 역할:
  동적으로 MovieInfo와 MovieVideos 컴포넌트를 렌더링하며, 비동기 데이터를 처리하기 위해 Suspense를 사용한다.

• Suspense 활용:

  • 데이터 로드가 완료되기 전에는 fallback UI를 표시한다.
  • MovieInfo와 MovieVideos는 병렬로 데이터를 Fetch하여 빠르게 렌더링된다.

---

Dynamic Metadata의 주요 필드

generateMetadata 함수에서 반환할 수 있는 주요 메타데이터 필드는 다음과 같다.

주요 메타데이터 필드

필드명	설명
title	페이지의 제목 (브라우저 탭에 표시됨).
description	페이지의 설명 (SEO 및 검색 엔진에서 사용됨).
keywords	페이지와 관련된 키워드 배열.
robots	검색 엔진 크롤링을 제어하는 값 (예: index, noindex, nofollow 등).
openGraph	Open Graph 프로토콜에 따라 메타 정보를 설정 (예: 소셜 미디어 공유 시 표시될 내용).
twitter	Twitter Cards 메타 정보를 설정 (예: 트위터에서의 미리보기 카드 내용).
viewport	페이지의 뷰포트 설정 (예: width=device-width, initial-scale=1.0).

메타데이터 필드 예제

export async function generateMetadata({ params: { id } }: IParams) {
  const movie = await getMovie(id);
  return {
    title: movie.title,
    description: `Watch ${movie.title} and explore its details!`,
    keywords: ["movie", movie.title, "watch online"],
    openGraph: {
      title: movie.title,
      description: `Find out more about ${movie.title}.`,
      images: [movie.posterUrl],
    },
    twitter: {
      card: "summary_large_image",
      title: movie.title,
      description: `Learn about ${movie.title} here.`,
      image: movie.posterUrl,
    },
  };
}

---

Dynamic Metadata와 Static Metadata의 차이

특징	Dynamic Metadata	Static Metadata
데이터 처리	동적으로 생성 (API 호출, 비동기 작업 가능)	정적으로 설정 (고정된 값 사용)
사용 예시	generateMetadata 함수	metadata 객체
SEO	동적 페이지 및 콘텐츠에 적합	고정된 콘텐츠에 적합
적용 범위	서버 컴포넌트에서만 사용 가능	서버 컴포넌트에서 사용 가능

추가 정보는 Next.js 공식 문서를 참조.