8️메타데이터 다루기

메타데이터에서 배웠던 내용을 토대로 날씨 앱의 메타데이터를 바꿔보겠습니다.

정적 메타데이터

항상 고정된 메타데이터를 지정하는 건 metadata 객체를 정의하는 것으로 해결됩니다.

app/layout.tsx

export const metadata: Metadata = {
  title: '날씨 앱',
  description: 'Next.js로 만든 날씨 앱',
}

동적 메타데이터

데이터에 따라 다른 메타데이터를 지정하기 위해선 generateMetadata라는 이름의 함수를 정의하면 됩니다. 함수 내에서 fetch 함수를 이용해 데이터를 가져올 수도 있으니 원하는 어떤 문구든 만들 수 있습니다.

app/[location]/page.tsx

export function generateMetadata({ searchParams }: Props): Metadata {
  return {
    title: `${searchParams.name}의 3일 예보`,
    description: `${searchParams.name}의 3일 예보를 알려드립니다`,
  }
}

주요 기능은 완성됐습니다. 이제 서비스를 배포해보겠습니다.