before start
_document.js에 대해 알아보기 전에, _app.js가 무엇이었는지 간단히 정리해 보자. _app.js는 next.js 어플리케이션의 shell(껍질)이다.
// pages/_app.js
import Layout from '../components/layout/layout';
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
- next.js에 의해 <Component>는 자동으로 렌더링 해야 할 페이지 컴포넌트가 된다.
- 모든 페이지 컴포넌트에 적용해야 하는 스타일링, Head 태그 등을 여기에서 설정할 수 있다.
- 즉, 어플리케이션 html 페이지의 root element 라고 볼 수 있다.
what is _document.js?(공식문서)
document.js 파일은 어플리케이션의 전체 html을 구성할 수 있는 파일이다. app.js와 마찬가지로, pages 폴더의 바로 하위에 속해야 한다.
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
- 위의 render 함수가 반환하는 값이 next.js가 기본으로 설정하고 있는 값이다.
- next/head 모듈의 Head와 next/document 모듈의 Head는 다른 컴포넌트이다.
- 전자는 모든 페이지 컴포넌트에서 적용할 수 있지만, 후자는 document.js 파일에서만 사용 가능하다.
- 아래와 같이 속성을 추가하거나, 태그 자체를 추가할 수 있다.
<Html lang="en" />
<body>
<Main />
<div id="modal" />
<NextScript />
</body>
document.js 파일을 설정한 후에는, 개발 서버를 재시작해야 변경된 내용을 확인해 볼 수 있다.
궁금한 점
- 공식문서에 보면 document를 함수형 컴포넌트로도 작성할 수 있는데, 내가 연습하고 있는 프로젝트에서는 에러가 남.
- 혹시 next.js 버전이 안맞아서 그런가…?
'Study > Next' 카테고리의 다른 글
| mongoDB (0) | 2022.10.23 |
|---|---|
| API route (0) | 2022.10.20 |
| optimization with <head> & <image> (1) | 2022.10.18 |
| client side data fetching (0) | 2022.10.17 |
| pre-rendering (0) | 2022.10.14 |
