React

 

 

_document.js

 

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

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ko">
        <Head />
        <body>
            <div id="overlays" />
            <Main />
            <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

 

 

주요 구성 요소 설명

  1. import Document, { Html, Head, Main, NextScript } from "next/document";:

    • Next.js의 Document 클래스와 관련 컴포넌트들을 임포트합니다.
    • Html, Head, Main, NextScript는 각각 HTML 문서의 주요 부분을 정의합니다.
  2. class MyDocument extends Document:

    • Document 클래스를 상속받는 사용자 정의 문서를 정의합니다. Next.js는 서버 사이드 렌더링 중에 이 문서를 사용하여 전체 HTML 문서를 생성합니다.
  3. render() 메서드:

    • 이 메서드는 사용자 정의 HTML 구조를 반환합니다.
    • 이 구조는 Next.js 애플리케이션의 기본 HTML 골격을 정의합니다.
  4. <Html lang="ko">:

    • HTML 문서의 루트 요소를 정의합니다.
    • lang="ko" 속성은 문서의 언어를 한국어로 설정합니다.
  5. <Head />:

    • HTML 문서의 <head> 요소를 정의합니다.
    • 이 부분에 메타데이터, 스타일 시트, 스크립트 등을 추가할 수 있습니다.
  6. <body>:

    • HTML 문서의 <body> 요소를 정의합니다.
    • 여기서 실제 애플리케이션 콘텐츠가 렌더링됩니다.
  7. <div id="overlays" />:

    • 오버레이와 같은 특정한 DOM 요소를 렌더링하기 위한 빈 div입니다.
    • 예를 들어 모달 창 같은 요소를 여기서 렌더링할 수 있습니다.
  8. <Main />:

    • Next.js 애플리케이션의 메인 콘텐츠를 렌더링하는 자리 표시자입니다.
    • 페이지 컴포넌트들이 이곳에 렌더링됩니다.
  9. <NextScript />:

    • Next.js가 페이지에 필요한 스크립트를 삽입하는 자리 표시자입니다.
    • 이 스크립트들은 페이지가 제대로 작동하는 데 필요한 모든 스크립트를 포함합니다.
  10. export default MyDocument;:

    • MyDocument 클래스를 기본 내보내기로 설정합니다.
    • 이렇게 하면 다른 파일에서 이 클래스를 임포트할 수 있습니다.

용도

이 코드의 목적은 Next.js 애플리케이션의 전체적인 HTML 문서를 커스터마이즈하는 것입니다. 일반적으로 <Html>, <Head>, <Main>, <NextScript>는 Next.js가 자동으로 추가하지만, 사용자 정의 문서에서는 필요에 따라 이들을 확장하거나 수정할 수 있습니다. 예를 들어 글로벌 스타일 시트 추가, 폰트 로딩, 메타 태그 설정 등이 가능합니다.

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

이보다 더한 불행은 얼마든지 있다고 생각하라. -탈무드-

댓글 ( 0)

댓글 남기기

작성