본문 바로가기
📺 Front End/-- react & redux & nextjs

[Next.js] _document.js로 레이아웃 템플릿을 사용해서 html 과 body 태그 커스터마이징 하기.

by Wonit 2021. 1. 3.

Document 컴포넌트

Next.js에는 <html> 태그와 <body> 태그를 조작하기 위해서 <Document> 컴포넌트를 제공한다.

 

Build 시점에 _document.js파일을 pages 디렉토리 안에서 탐색하고 <Document>를 extends 한 컴포넌트를 이용해서 커스텀 설정을 받아들히는데, 이는 필수 파일은 아니며, 만약 우리가 커스텀하지 않으면 기본 Next의 모듈에 존재하는 _document.js 파일을 실행시킨다.


프로젝트가 커질 수록 HTML 태그를 조작해야할 일들이 많아지므로 우리는 _document.js<Document> 컴포넌트를 다룰 수 있는 능력이 있어야 한다.

기본 구조

pages 디렉토리 아래에 _document.js파일을 생성한다.

 

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

<Document>Class 형 컴포넌트만 지원하며 다음 4가지 컴포넌트는 필수로 존재해야 한다.

  • <Html>
  • <Head>
  • <Main>
  • <NextScript>

여기서 설명하지 않는 <Main><NextScript>이곳에서 확인할 수 있다.

 

주의

import Document, { Html, Head, Main, NextScript } from 'next/document'

그리고 4가지 필수 컴포넌트는 위와 같이 next/document에서 import 해야한다.

 

우리는 next/head에서 제공하는 <Head> 컴포넌트를 지난 시간Next에서 head 태그를 조작하는 방법에 배운적이 있다.


그것과 사용법 용도가 조금 다른데,

next/head의 Head 컴포넌트

next/head의 Head 컴포넌트는 특정 페이지에서 바뀌는 Head 태그에서 사용해야한다.


예를 들어 페이지마다 바뀌는 <title> 태그를 적용할 경우, 이는 pages 디렉토리 내에 있는 컴포넌트에서 next/head의 <Head> 컴포넌트를 이용해야한다.

 

next/document 의 Head 컴포넌트

next/document 의 Head 컴포넌트는 모든 페이지에서 사용할 Head 속성들을 조작할 때 사용한다.


예를 들어 페이지의 언어 설정인 <lang>과 같은 속성일 경우 _document.js에서 next/document의 <Head>를 import 하여 사용한다.

 

끝으로

이렇게 오늘은 document.js 파일에서 Html 구조를 조작하는 방법에 대해서 알아보았다.


Document 컴포넌트는 오로지 서버에서만 렌더되므로 onClick과 같은 이벤트 헨들러는 작동하지 않는다.


또한 <Main /> 밖에 있는 리액트 컴포넌트는 브라우저에서 작동하지 않고, 만약 HTML에 항상 존재하는 NavBar이나 SideBar과 같은 컴포넌트를 적용시키고 싶다면 App 컴포넌트를 이용하면 된다.


App 컴포넌트를 사용하려면 해당 카테고리를 확인해보면 된다!

댓글0