1. _app.js
_app 파일은 서버로부터 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃 역할을 한다.
모든 컴포넌트에 공통으로 적용할 속성 관리
function App({ component, pageProps }) {
return (
<Component />
}
}
export default App;규칙
Component의 속성값은 서버가 요청한 페이지가 된다.- pageProps는
getInitialProps,getStaticProps,getServerSideProps중 하나를 통해 페칭한 초기 속성값이 된다. _app에서도getInitialProps를 사용해 모든 페이지에서 사용할 공통 속성값을 지정할 수 있으나, 이럴 경우 자동 정적 최적화(Automatic Static Optimization)이 비활성화되어 모든 페이지가 서버 사이드 렌더링을 통해 제공된다.
2. _document.js
_document.js 파일은 _app 파일 다음에 실행되며, 공통적으로 활용할 <Head>나 <body> 태그 안에 들어갈 내용들을 커스텀 할 때 활용한다.
폰트 import
charset, 웹 접근성 관련 태그 설정
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>
)
}
}규칙
_document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성해야 하며, 렌더 함수는 꼭<Html>,<Head>,<Main>,<NextScript>요소를 리턴해줘야 한다._document에서 사용하는<Head>태그는 next/head가 아닌 next/document를 불러와야 한다._document는 언제나 서버에서 실해되므로 브라우저 API 또는 이벤트 핸들러가 포함된 코드는 실행되지 않는다.<Main />을 제외한 부분은 브라우저에서 실행되지 않으므로 이곳에 비즈니스 로직을 추가해서는 안되며,_app과 마찬가지로getStaticProps,getServerSideProps를 통해 데이터를 불러올 수 없다.
