Skip to main content

_document 파일

_document 파일은 페이지 컴포넌트를 그릴 때 필요한 HTML 부가 정보를 입력하는 컴포넌트입니다. 커스텀 문서(Custom Document) 컴포넌트라고도 합니다. 이 컴포넌트로 페이지 컴포넌트의 html, head, body 등의 태그 정보를 업데이트할 수 있습니다.

커스텀 문서 컴포넌트를 사용하기 위해서는 pages 폴더 밑에 _document.jsx을 생성하면 됩니다.

pages/_document.jsx
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

이 파일은 서버에서만 렌더링 되기 때문에 onClick과 같은 이벤트 핸들러는 사용할 수 없습니다. 그리고 위와 같이 <Html>, <Head>, <Main>, <NextScript> 컴포넌트는 페이지를 그리기 위해 꼭 포함되어야 합니다.

Head 컴포넌트 관련 주의 사항​

커스텀 문서 컴포넌트에서 <Head> 컴포넌트를 작성할 때 주의할 점이 있습니다. _document.jsx 파일에서 쓰이는 Head 컴포넌트는 페이지 컴포넌트에서 사용되는 Head 컴포넌트와 다릅니다.

// `_document.jsx` 파일에서 사용될 Head 컴포넌트
import { Head } from 'next/document'

// 페이지 컴포넌트에서 사용될 Head 컴포넌트
import { Head } from 'next/head'

_document.jsx 파일의 Head 컴포넌트는 모든 페이지에 공통으로 들어갈 내용이 포함되어야 합니다. 각 페이지 컴포넌트 별로 다르게 정의될 title, meta 태그와 같은 내용은 각 페이지에 import { Head } from 'next/head'를 추가하여 정의합니다.

커스텀 문서 컴포넌트 주의 사항​

  1. 커스텀 문서 컴포넌트에는 애플리케이션 로직이나 CSS 스타일을 넣으면 안됩니다. 만약 로직이나 스타일을 넣어야 한다면 대신 레이아웃 컴포넌트를 활용합니다.
  2. 커스텀 문서 컴포넌트는 커스텀 앱 컴포넌트와 마찬가지로 getStaticProps, getServerSideProps 등의 데이터 호출 메서드를 사용할 수 없습니다.