NEXT.JS APP, DOCUMENT 컴포넌트
Document 컴포넌트
Html 코드의 뼈대를 만드는 용도.
HTML, Head, Body 태그 속성 추가: html 태그에 lang 속성을 추가하거나, body 태그에 특정 CSS 클래스를 추가하는 등 기본 HTML 태그에 속성을 설정할 수 있습니다.
커스텀 폰트 또는 외부 스타일시트 링크: Google Fonts와 같은 외부 폰트를 사용하거나, 전역적으로 적용되는 CSS 파일을 head에 포함할 때 유용합니다.
메타 태그 및 스크립트 추가: 모든 페이지에 공통적으로 적용될 meta 태그, 웹 폰트 링크, 분석 스크립트(Google Analytics 등)를 head에 넣을 수 있습니다.
SSR(서버사이드 렌더링)시 필요한 스크립트 삽입: 서버에서 렌더링된 페이지에 필요한 특정한 스크립트를 body 끝에 추가할 수 있습니다.
주의사항
_document.js는 서버에서만 렌더링됩니다. 따라서 이벤트 핸들러(onClick 등)나 React Hooks(useState, useEffect 등)는 사용할 수 없습니다.
애플리케이션의 최상위 HTML 구조를 다루기 때문에, 여기서는 개별 페이지 콘텐츠(JSX)를 작성하지 않습니다. 페이지 콘텐츠는 Main 컴포넌트 내부에 자동으로 삽입됩니다.
Next.js 13부터는 app 라우터를 사용하는 경우 _document.js 대신 레이아웃(layout.js) 파일을 사용해 공통 HTML 구조를 관리합니다. pages 라우터 환경에서만 _document.js를 사용합니다.
export default function Document() {
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
App 컴포넌트
Component Prop을 받아서 렌더링 하는데, 그 Prop은 Next.js 페이지입니다.
모든 페이지에 적용될 코드(공통된 레이아웃)를 구현할때는 App컴포넌트에 구현하면 됩니다.
import "@/styles/global.css";
export default function App({ Component, pageProps }) {
return;
<>
<Header />
<Container>
<Component {...pageProps} />;
</Container>
</>;
}
from 코드잇
