메타데이터 API는 애플리케이션의 메타데이터를 정의하여 SEO 개선과 웹 공유 용이성을 높이는 데 사용될 수 있으며, 다음 항목들을 포함한다.
metadata 객체: 빌드 시점에 고정되는 메타데이터를 정의generateMetadata 함수: 요청 시점에 동적으로 메타데이터를 생성위의 모든 옵션을 사용하면, Next.js는 페이지에 대한 관련 <head> 태그를 자동으로 생성하며, 이는 브라우저 개발자 도구에서 확인할 수 있다.
meatdata 객체와 generateMetadata 함수의 내보내기는 서버 컴포넌트에서만 지원된다.
route에서 메타데이터를 정의하지 않더라도, 항상 추가되는 두 가지 기본 <meta> 태그가 있다.
meta charset 태그: 웹사이트의 문자 인코딩을 설정meta viewport 태그: 웹사이트의 뷰포트 너비와 스케일을 설정하여 다양한 장치에 맞게 조정이 두 태그는 다음과 같다.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
다른 메타데이터 필드는 Metadata 객체 (정적 메타데이터용) 또는 generateMetadata 함수를 사용하여 정의할 수 있다.
정적 메타데이터를 정의하려면, 정적인 layout.js 또는 page.js 파일에서 Metadata 객체를 export하면 된다.
예를 들어, 블로그 경로에 제목과 설명을 추가하는 방법은 다음과 같다.
app/blog/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'My Blog',
description: '...',
}
export default function Layout() {}
사용 가능한 옵션의 전체 목록은 generateMetadata documentation에서 확인할 수 있다.