next.js) Metadata

메타 데이터는 애플리케이션의 SEO 및 웹 공유성을 개선하기 위해 html 헤드 요소내부의 메타 및 링크 태그를 정의하는 데 사용한다.

Next.js는 애플리케이션 메타 데이터를 정의하기 위한 두 가지 방법을 제공한다.

1. Config 기반 메타데이터

layout.js 또는 page.js 파일에서 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 낸다.

2. 파일 기반 메타데이터

라우트 세그먼트에 정적 또는 동적으로 생성된 특별한 파일을 추가한다.

두 옵션 모두에서 Next.js는 페이지에 대한 관련 head 요소를 자동으로 생성한다.

정적 메타데이터

정적 메타 데이터를 정의하려면 layout.js 또는 page.js 파일에서 Metadata 객체를 내보낸다.

// layout.tsx | page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: '...',
  description: '...',
}

export default function Page() {}

동적 메타데이터

동적 값이 필요한 메타 데이터를 가져오려면 generateMetadata 함수를 사용한다.

// app/products/[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,
): Promise<Metadata> {
  // 경로 매개변수 읽기
  const id = params.id

  // 데이터 가져오기
  const product = await fetch(`https://.../${id}`).then((res) => res.json())

  return {
    title: product.title,
  }
}

export default function Page({ params, searchParams }: Props) {}

정적 및 동적 메타 데이터는 Server Components에서만 지원된다.