Metadata 타입과 다이나믹 메타데이터(동적 메타데이터)

Metadata 타입

Next.js에서 사용되는 페이지의 메타데이터를 정의하는 인터페이스

****페이지의 타이틀, 설명, 키워드 등의 정보를 타입 안정성을 가지고 정의할 수 있다.****

일반적인 사용은 다음과 같다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
title: '페이지 타이틀',
description: '페이지 설명',
// 추가적인 메타데이터 필드
};

metadata 상수는 Metadata 타입을 따르는 객체로 정의되어 있다.

타입을 명시적으로 지정함으로써 올바른 형식의 메타데이터를 사용하고, 타입 검사를 통해 오류를 방지할 수 있다.

static meta data는 Layout.tsx나 page.tsx에 정의한다.

하지만 개별 유저나 데이터에 따라 다이나믹한 metadata를 만들 수도 있다.

다이나믹 메타데이터

다이나믹 라우팅이 적용되는 페이지에서
generateMetadata라는 비동기 함수를 만들어주는데
params라는 타입의 매개변수에 따라 메타데이터를 생성한다.

나는 앞전에 썼던 users폴더 안에 [userId] 폴더안에 있는 UserPage에 동적 메타데이터 함수를 작성했다.

import type { Metadata } from "next";
type Params = {
    params: {
        userId: string
    }
}
export async function generateMetadata({ params: { userId } }: Params): Promise<Metadata> {
    const userData: Promise<User> = getUser(userId);

    const user: User = await userData;

    return {
        title: `${user.name}`,
        description: `이것은 ${user.name}의 페이지 입니다.`
    }
}

export async function generateMetadata({ params: { userId } }: Params): Promise<Metadata> {}

generateMetadata함수의 반환 타입은 Promise<Metadata>이다.

Metadata 타입의 프로미스를 반환한다.

const userData: Promise = getUser(userId);

비동기로 유저를 받아오고 user라는 변수에 할당한다.

그리고 Promise<Metadata>형태의 결과를 반환하기 때문에 이것은 해당 사용자의 메타데이터를 나타낸다.

반환된 메타데이터에 사용자 이름과 설명을 넣으면 각 사용자에 따른 메타데이터를 생성할 수 있다.