8️메타데이터

Next.js에서는 메타데이터(Metadata)를 설정하는 두 가지 방법이 있습니다. 설정 기반 메타데이터(Config-based Metadata)와 파일 기반 메타데이터(File-based Metadata)가 그 방법입니다. 이번 강의에서는 설정 기반 메타데이터를 중심으로 다룹니다.

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

정적 메타데이터

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

layout.tsx 혹은 page.tsx

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

동적 메타데이터

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

app/blog/[id]/page.tsx

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) {}

참고 자료

• https://nextjs.org/docs/app/building-your-application/optimizing/metadata