반응형
Next 12의 경우
Next.js 12 이전에는 next/head 컴포넌트를 사용하여 메타데이터를 설정.
import Head from 'next/head';
export default function Page() {
return (
<Head>
<title>My Page Title</title>
<meta name="description" content="My Page Description" />
<link rel="icon" href="/favicon.ico" />
</Head>
<p>This is my page</p>
);
}
다음과 같이 메타데이터를 기록 하였다.
Next 13 이후의 경우
Next.js 13부터는 next/head 컴포넌트 대신 Metadata 라이브러리를 사용하여 메타데이터를 설정. Metadata API는 페이지의 메타데이터를 정의하는 객체를 제공
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'My Page Title',
description: 'My Page Description',
icon: '/favicon.ico',
};
export default function Page() {
return (
<p>page</p>
);
}
동적 Metadata 사용법
generateMetadata 함수를 사용하여 동적 라우팅에서 메타데이터를 설정
import { Metadata, generateMetadata } from 'next';
export const metadata: Metadata = {
title: generateMetadata('title'),
description: generateMetadata('description'),
icon: generateMetadata('icon'),
};
export default function Page({ title, description, icon }) {
return (
<p>This is my page</p>
);
}
반응형
'Stack > Next.js' 카테고리의 다른 글
| Button으로 Resizable 구현하기 (2) | 2024.06.04 |
|---|---|
| Draggable 구현하기 (0) | 2024.06.04 |
| Next Image 사용하는 방법 (1) | 2024.05.14 |
| 📘 Next.js 에 markdown 설치 하기 (1) | 2024.05.09 |
| MongoDB 와 Next.JS 연결하기 (0) | 2024.05.01 |