NextJs - Metadata
Jun 29, 2024
Contents
MetadataMetadata
- 웹 공유성 및 SEO 향상을 위해 메타데이터를 정의할 수 있다.
- 검색 엔진 최적화를 위해 사용됨
- HTML
<head>요소에 삽입됨 - 클라이언트 컴포넌트에서는 사용 X(에러남..)
- Config-based Metadata, File-based Metadata로 나눠진다.
- Config-based Metadata
- Static Metadata
- metadata object를 export 하는 방식
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
}
export default function Page() {}- generateMetadata() 사용
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> {
// read route params
const id = params.id
// fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// optionally access and extend (rather than replace) parent metadata
const previousImages = (await parent).openGraph?.images || []
return {
title: product.title,
openGraph: {
images: ['/some-specific-page-image.jpg', ...previousImages],
},
}
}
export default function Page({ params, searchParams }: Props) {}- File-based Metadata
- 특수 파일들 - favicon.ico, robots.txt, sitemap.xml 등..
Share article
