[next/react] metadata 설정하기

정적 metadata 설정

// layout.tsx 또는 특정 페이지 컴포넌트 파일
export const metadata = {
     title: '초보 개발자를 위한 리액트 입문',
     description: '리액트를 처음 배우는 개발자를 위한 기초부터 심화까지의 과정을 담은 페이지'
};

 

동적 metadata 설정

import fetchProductDetails from '../path/to/api';
export async function generateMetadata({ params }) {
     const product = await fetchProductDetails(params.id);
     return {
        title: `${product.name} - 상품 정보`,
        description: product.description };
}

 

 

파일 기반 metadata

: 동일 경로에 다양한 metadata 설정이 있을 경우, 파일 기반 설정이 우선적으로 적용된다.)

// app/pages/about/metadata.json
{
     "title": "회사 소개",
     "description": "저희 회사의 비전과 사명을 소개합니다",
     "robots": "index, follow"
}

 

 

내가 설정하지 않아도 필수적으로 포함되는 기본 meta tag

1. 문자 인코딩 태그: 웹 페이지의 문자 인코딩 설정 

<meta charset="utf-8" /> 

 

2. 뷰포트 태그: 모바일 기기에서의 보기 영역을 제어

<meta name="viewport" content="width=device-width, initial-scale=1" />

 

 

출처 : https://reactnext-central.xyz/blog/nextjs/metadata