_app.js
서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트이고, 페이지에 적용될 공통적인 레이아웃의 역할을 한다.
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
Component
클라이언트가 서버에 요청한 페이지를 이야기한다. 예를 들어 http://localhost:3000/menu에 접속하면 Component는 menu 컴포넌트를 가리키게 된다.
pageProps
만약 해당 페이지에서 getInitialProps, getStaticProps, getServerSideProps 등을 통해서 서버에서 받아 온 외부 데이터가 있을 때, 그 데이터를 이야기한다.
_document.js
_app 다음에 실행되어서 공통적으로 활용할 <head>나 <body> 태그 안에 들어갈 내용들, 즉 공통적으로 적용할 HTML 마크업을 커스텀할 때 활용한다.
_document는 언제나 서버 쪽에서 실행된다. 따라서 브라우저 api나 이벤트 핸들러를 사용할 수가 없다. 또한 getStaticProps와 getServerSideProps를 통해서 데이터를 불러올 수가 없다.
// 기본적인 _document의 형태
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument 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 MyDocument