Next.js에서 metadata와 generateMetadata 차이점 및 사용법
KUKJIN LEE • 3주 전 작성
Next.js에서 SEO와 메타데이터 설정을 위해 metadata
와 generateMetadata
두 가지 방법을 제공합니다.
1. metadata: 정적 메타데이터 설정
metadata
객체는 빌드 시점에 결정되는 정적 메타데이터를 설정할 때 사용합니다.
export const metadata: Metadata = {
title: 'Kakao.GG Tech Blog',
description: 'Hello this is Kakao.GG Tech Blog',
openGraph: {
title: 'About Kakao.GG',
description: 'Make something fun',
images: [{ url: '/images/kakaogg.png' }],
},
}
-
빌드 시 결정되는 고정 값
-
동적 데이터가 필요 없는 경우에 적합
-
간단하고 직관적인 사용법
2. generateMetadata: 동적 메타데이터 생성
generateMetadata
함수는 요청 시 동적으로 메타데이터를 생성해야 할 때 사용합니다.
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await fetchPost(params.id)
return {
title: `${post.title} | Kakao.GG`,
description: ${post.description},
}
}
-
요청 시점에 동적으로 메타데이터 생성
-
비동기 함수로 외부 데이터 fetch 가능
-
URL 파라미터나 동적 데이터 기반 메타데이터에 적합
metadata vs generateMetadata: 언제 무엇을 사용해야 할까?
-
metadata
-
데이터 유형: 정적
-
비동기 처리: 불가능
-
사용: 고정 페이지
-
성능: 빠름 (빌드 시 생성)
-
-
generateMetadata
-
데이터 유형: 동적
-
비동기 처리: 가능
-
사용: 동적 콘텐츠 페이지
-
성능: 상대적으로 느림 (요청 시 생성)
-
주의사항
-
TypeScript 사용 시
Metadata
타입을 import하여 타입 안정성 확보 -
generateMetadata
에서 무거운 작업은 피하고, 필요한 데이터만 입력
정적일 때 generateMetadata를 사용하는 건 잘못된 것일까?
generateMetadata
는 본래 동적인 메타데이터를 설정하기 위한 비동기 함수이므로, 다음과 같은 이유로 비동적인 데이터를 처리할 때는 metadata
를 사용하는 것이 권장됩니다.
-
성능 최적화:
generateMetadata
는 비동기 함수로 설계되어 있어, 호출 시점에 불필요한 비동기 처리가 발생할 수 있습니다. 정적인 메타데이터는 불필요한 비동기 처리를 할 필요가 없기 때문에metadata
가 더 효율적입니다. -
코드 가독성 및 유지보수: 정적인 데이터를 처리하는 데에
generateMetadata
를 사용하면, 다른 개발자가 이 코드를 읽을 때 해당 메타데이터가 동적으로 생성된다고 오해할 수 있습니다. 반면,metadata
를 사용하면 이 데이터가 정적임을 명확하게 표현할 수 있습니다. -
Next.js 관례: Next.js에서는
metadata
는 정적 메타데이터를 설정하는 데에,generateMetadata
는 동적 메타데이터를 생성하는 데에 사용됩니다. 이러한 관례를 따르면, 프로젝트의 일관성을 유지하고 더 쉽게 유지보수할 수 있습니다.
따라서, 정적인 데이터가 필요한 경우에는 metadata
를 사용하고, 동적으로 데이터를 받아와야 할 때 generateMetadata
를 사용하는 것이 더 나은 선택입니다.