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 컴포넌트를 사용하려면 해당 카테고리를 확인해보면 된다!

저작자표시 동일조건

'📺 Front End > - React, Next.js' 카테고리의 다른 글

[React-redux] 늘 그렇듯 Todo List 를 만들어보며 배우는 리액트 리덕스 (0)	2021.06.10
[Next.js] Next.js 프로젝트에서 Storybook으로 TDD 하기 (Feat. Atomic Design Pattern) (2)	2021.01.18
[Next.js] renderPage 함수로 styled-components 오류 방지하기. (0)	2021.01.03
[styled-components] ThemeProvider에서 MediaQuery를 적용하는 2가지 방법 (3)	2021.01.02
[styled-components] ThemeProvider로 공통 스타일 속성 관리하기. (0)	2021.01.02

Wonit

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

Document 컴포넌트

기본 구조

주의

`next/head`의 Head 컴포넌트

`next/document` 의 Head 컴포넌트

끝으로

'📺 Front End > - React, Next.js' 카테고리의 다른 글

댓글

티스토리툴바

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

Document 컴포넌트

기본 구조

주의

next/head의 Head 컴포넌트

next/document 의 Head 컴포넌트

끝으로

'📺 Front End > - React, Next.js' 카테고리의 다른 글

관련글

댓글

티스토리툴바

`next/head`의 Head 컴포넌트

`next/document` 의 Head 컴포넌트