[Next TIL]메타데이터

🧐 메타데이터란?

• 페이지를 설명하는 데이터. 데이터에 대한 데이터

메타데이터를 설정하는 방식

• 설정 기반 메타데이터(Config-based Metadata)와 파일 기반 메타데이터(File-based Metadata)가 그 방법입니다.

➡️ 설정 기반 메타데이터(Config-based Metadata)

• 설정 기반 메타데이터 방식에는 정적 방식(Static Metadata)과 동적 방식(Dynamic Metadata)이 있습니다.

정적 방식(Static Metadata)

정적 방식은 Metadata 객체를 정의하는 방식이다.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

동적 메타데이터

동적 방식은 generateMetadata라는 함수를 이용해 동적으로 Metadata 객체를 생성하는 방식입니다.

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent?: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id
  
  const post = await fetch(`https://.../${id}`).then((res) => res.json())
  
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: post.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}