next/head의 Head 컴포넌트
만약 페이지마다 달라질 메타데이터가 존재하는 경우에는 페이지 컴포넌트 내부에서 "next/head"가 제공하는 Head 컴포넌트를 사용합니다.
예를 들어, 각 페이지마다 페이지의 설명을 나타내는 meta 태그를 작성하고자 할 때 다음과 같이 작성합니다.
// pages/index.js
import Head from 'next/head';
const HomePage = () => {
return (
<>
<Head>
<meta name="description" content="페이지 설명" />
,,,
</Head>
<h1>This is HomePage!!</h1>
</>
);
};
export default HomePage;"next/head"의 Head 컴포넌트는 모든 페이지 컴포넌트에서 사용가능하며, 각 페이지에 맞는 메타 데이터를 설정할 수 있습니다.
반면에 _document.js에서 사용하는 next/docuemnt의 Head 컴포넌트는 _document.js 에서만 사용 가능하며 모든 페이지에서 공통적으로 설정할 메타 데이터를 작성합니다.
주의할 점으로 html 어트리뷰트 작성시에는 반드시 "카멜 케이스"로 작성해야 합니다.
next/document의 Head 컴포넌트
메타 데이터는 SEO에 중요한 역할을 합니다. 이전에 _document.js에서 "next/document"가 제공하는 Head 컴포넌트 내부에 메타 데이터를 작성할 수 있었습니다. Head 컴포넌트 내부에 작성된 메타 데이터들은 생성되는 모든 HTML 문서에 적용되는 공통 메타 데이터가 됩니다.
next/document가 제공하는 Head 컴포넌트는 _document.js에서만 사용가능하며, 모든 페이지에 공통적으로 적용될 메타 데이터를 작성합니다.
// pages/_document.js
import { Html, Head, body, Main, NextScript } from 'next/document';
function MyDocument() {
return (
<Html>
<Head>
// 모든 페이지에 적용할 메타 데이터
<title>웹 페이지 제목</title>
<meta charSet="UTF-8" />
<meta name="vieport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="페이지 작성자" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
export default MyDocument;NextJS는 자체적으로 "next/head"의 Head 컴포넌트 내용과 "next/document"의 Head 컴포넌트 내용을 병합합니다.
만약 동일한 메타 데이터 작성시 각 페이지에 적용되는 "next/head"의 Head 컴포넌트 내용이 "next/document"의 Head 컴포넌트 내용보다 우선시되어 적용됩니다.
즉, 충돌이나 중복되지 않고 NextJS가 자체적으로 이를 병합하여 처리해줍니다.
