_document : head 태그나 body태그 안에 들어갈 내용들을 커스텀할 때 활용
- _app.js 파일 다음에 실행
- title, description, meta 등 정보 제공 HTML 태그 작성 가능
- CSS-in-JS의 서버 사이드 렌더링을 위한 설정을 할 때 사용
설정
1) _document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성
- 렌더 함수는 꼭 <Html>, <Head>, <Main>, <NextScript> 요소를 리턴
2) _document에서 사용하는 <Head>태그는 next/head가 아닌 next/document 모듈에서 불러와야한다.
- _document의 <Head>태그에는 모든 문서에 공통적으로 적용될 내용(Ex. charset, 뷰포트 메타태그 등)이 들어간다.
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<!— 모든 페이지의 제목이 front web으로 변한다. —>
<title>front web</title>
<meta charSet="utf-8"></meta>
<body>
<Main />
<NextScript />
</body>
</Head>
</Html>
);
}
}
3) _document는 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않는다.
- <Main /> 부분을 제외한 부분은 브라우저에서 실행되지 않으므로 이곳에 비즈니스 로직을 추가해서는 안되며, _app과 마찬가지로 getStaticProps와 getServerSideProps 를 통해 데이터를 불러올 수 없다.
출처
https://gschoi1224.github.io/docs/Next.js/commonPage/
Next.js 공통 페이지
CGS’s Dev Log
gschoi1224.github.io
https://merrily-code.tistory.com/154
Next.js의 _document와 _app에 대하여
Next.js에는 두 가지 중요한 기본 페이지가 있는데요, 바로 _document 와 _app 입니다. _document 와 _app 에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내
merrily-code.tistory.com
'Development > React.js' 카테고리의 다른 글
| next - Layout (0) | 2022.04.14 |
|---|---|
| next - _error.js (0) | 2022.04.14 |
| next에서의 Data Fetching (0) | 2022.04.14 |
| next.config.js 로 Rewrite 하기 (0) | 2022.04.14 |
| next.config.js로 Redirects 설정 (0) | 2022.04.14 |