2247
No
_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;
주요 구성 요소 설명
import Document, { Html, Head, Main, NextScript } from "next/document";:
- Next.js의 Document 클래스와 관련 컴포넌트들을 임포트합니다.
- Html, Head, Main, NextScript는 각각 HTML 문서의 주요 부분을 정의합니다.
class MyDocument extends Document:
- Document 클래스를 상속받는 사용자 정의 문서를 정의합니다. Next.js는 서버 사이드 렌더링 중에 이 문서를 사용하여 전체 HTML 문서를 생성합니다.
render() 메서드:
- 이 메서드는 사용자 정의 HTML 구조를 반환합니다.
- 이 구조는 Next.js 애플리케이션의 기본 HTML 골격을 정의합니다.
<Html lang="ko">:
- HTML 문서의 루트 요소를 정의합니다.
- lang="ko" 속성은 문서의 언어를 한국어로 설정합니다.
<Head />:
- HTML 문서의 <head> 요소를 정의합니다.
- 이 부분에 메타데이터, 스타일 시트, 스크립트 등을 추가할 수 있습니다.
<body>:
- HTML 문서의 <body> 요소를 정의합니다.
- 여기서 실제 애플리케이션 콘텐츠가 렌더링됩니다.
<div id="overlays" />:
- 오버레이와 같은 특정한 DOM 요소를 렌더링하기 위한 빈 div입니다.
- 예를 들어 모달 창 같은 요소를 여기서 렌더링할 수 있습니다.
<Main />:
- Next.js 애플리케이션의 메인 콘텐츠를 렌더링하는 자리 표시자입니다.
- 페이지 컴포넌트들이 이곳에 렌더링됩니다.
<NextScript />:
- Next.js가 페이지에 필요한 스크립트를 삽입하는 자리 표시자입니다.
- 이 스크립트들은 페이지가 제대로 작동하는 데 필요한 모든 스크립트를 포함합니다.
export default MyDocument;:
- MyDocument 클래스를 기본 내보내기로 설정합니다.
- 이렇게 하면 다른 파일에서 이 클래스를 임포트할 수 있습니다.
용도
이 코드의 목적은 Next.js 애플리케이션의 전체적인 HTML 문서를 커스터마이즈하는 것입니다. 일반적으로 <Html>, <Head>, <Main>, <NextScript>는 Next.js가 자동으로 추가하지만, 사용자 정의 문서에서는 필요에 따라 이들을 확장하거나 수정할 수 있습니다. 예를 들어 글로벌 스타일 시트 추가, 폰트 로딩, 메타 태그 설정 등이 가능합니다.
댓글 ( 0)
댓글 남기기