9. Meta Data

 

 

Next.js에는 SEO 및 웹 공유성을 향상시키기 위해 애플리케이션 메타데이터를 정의하는 데 사용할 수 있는 Metadata API가 있다. 이를 통해 HTML head 요소 내에서 meta 및 link 태그를 추가할 수 있다.

 

정적 Meta Data

layout.js 또는 정적 page.js 파일에서 Metadata 객체를 내보낸다.

//layout.tsx
export const metadata: Metadata = {
    title: 'NEXT MALL',
    description: 'X2BEE MALL FO by Plateer',
    icons: {
        icon: '/favicon.ico',
    },
};

 

동적 Meta Data

generateMetadata 함수를 사용하여 동적 Meta Data를 구성할 수 있다.

export async function generateMetadata(
): Promise<Metadata> {
    const title = crypto.randomUUID();
    return {
        title: title,
    }
}

 

Template

title.template은 자식 라우트 세그먼트에서 정의된 제목에 접두사 또는 접미사를 추가하는 데 사용될 수 있다.

//app/layout.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Plateer',
    default: 'Plateer',
  },
}

//app/about/page.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'About',
}