반응형
Next.js는 페이지에 공통으로 적용되는 _document와 _app이 존재한다.
_app
서버에 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로 공통 레이아웃 역할을 한다.
애플리케이션이 실행되면 가장 먼저 호출되기 때문에 글로벌한 작업을 수행할 때 사용한다.
function app({ Component, pageProps }) {
return <Component {...pageProps} />
}
app.getInitialProps = async (appContext) => {
// ...
return { ...appProps }
}사용 예.
- 페이지 전환 시에도 전체 레이아웃을 유지하고 싶은 경우
- 페이지 전환 후 state를 유지하고 싶은 경우
- 페이지에 추가적인 데이터를 삽입하고 싶은 경우
- 글로벌 CSS를 적용하고 싶은 경우
_document
_app 다음에 실행되며, 공통적으로 활용하는 <head>나 <body> 태그 안에 들어갈 내용을 커스텀할 때
사용한다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class Document extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default Document_document는 서버에서만 렌더링 되므로 onClick과 같은 이벤트 처리는 작동되지 않는다.
사용 예.
- 글로벌 커스텀 스타일 시트 로드 (ex_ Material UI, Bootstrap,... )
- 글로벌 Head
반응형
'Next.js > 이론' 카테고리의 다른 글
| [Next.js] getInitialProps vs getStaticProps vs getServerSideProps (0) | 2022.09.09 |
|---|---|
| [Next.js] 404 페이지 (3) | 2022.07.05 |
| [Next.js] Dynamic Routes (1) | 2022.07.05 |
| [Next.js] Server Side Rendering (1) | 2022.07.04 |
| [Next.js] Redirect & Rewrite (1) | 2022.07.03 |