Next.js에서 동적 메타데이터 생성하기

📝들어가기 앞서서

오늘은 프로젝트 도중 디테일 페이지를 담당해서 디테일 페이지에 동적 메타데이터를 적용했고, 이번에 작업한 내용을 블로그글로 정리해보았다. 🤓

📖 동적 데이터란?

동적 메타데이터는 페이지마다 다른 제목(title), 설명(description) 등을 설정할 수 있게 해줍니다.

⭐ 동적 메타데이터 생성

동적 메타데이터를 생성하기 위해서는 특정 데이터에 접근하여 그 데이터를 기반으로 메타데이터를 설정할 수 있어야 합니다. 다음은 오늘 배운 내용을 바탕으로 단계별로 설명한 것입니다.

1. Next.js의 generateMetadata 함수 사용

• Next.js는 generateMetadata 함수를 제공하여 동적으로 메타데이터를 생성할 수 있다. 이 함수는 URL 파라미터를 받아서 데이터를 가져오고, 그 데이터를 기반으로 메타데이터를 설정한다.

2. 데이터를 가져오기

• 데이터를 가져오기 위해 (데이터를 가져올) 함수를 사용합니다. 이 함수는 베이커리 ID를 받아서 해당 베이커리의 정보를 반환한다.

3. 메타데이터 설정

• 가져온 데이터를 기반으로 메타데이터를 설정한다. 만약 베이커리 데이터를 찾을 수 없으면 기본 메타데이터를 설정한다.

import { Metadata } from "next";
import { fetchBakeryDetails } from "@/lib/bakerApi";

// 동적 메타데이터 생성 함수
export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const { id } = params;
  const bakery = await fetchBakeryDetails(id);

  if (!bakery) {
    return {
      // 정보를 찾을 수 없는 경우의 메타데이터
      title: "정보를 찾을 수 없습니다",
      description: "정보를 찾을 수 없습니다.",
      keywords: ["홈페이지", "테스트", "개발자"],
      authors: [
        { name: "어린이1" },
        { name: "어린이2" },
        { name: "어린이3" },
      ],
    };
  }

  return {
    // 정보를 찾은 경우의 메타데이터
    title: `타이틀이름 - ${지정할.name}`,
    description: `${bakery.name} - 정보가 담긴 페이지입니다.`,
   keywords: ["홈페이지", "테스트", "개발자"],
    authors: [
        { name: "어린이1" },
        { name: "어린이2" },
        { name: "어린이3" },
      ],
  };
}

generateMetadata 동작 원리

1. params.id 추출 : params 객체에서 id 값을 추출한다.
2. 정보 불러오기 :데이터 불러올(id) 함수를 호출하여 id에 해당하는 정보를 불러온다.
3. 메타데이터 생성: 불러온 정보가 존재하는지 확인합니다.

• 정보가 존재하는 경우: 해당 빵집의 이름과 기타 정보를 포함한 메타데이터를 생성한다.
• 빵집 정보가 존재하지 않는 경우: "정보를 찾을 수 없습니다"라는 내용을 포함한 메타데이터를 생성한다.

이 과정을 통해 메타데이터를 동적으로 생성할 수 있다.