next.js의 _document, _app 파일

rosyoon·2023년 2월 14일
0

프론트엔드 공부

목록 보기
31/34

_app, _document 파일의 공통점

두 파일 모두 Next.js 어플리케이션에서 모든 페이지에 대해 글로벌한 컨트롤을 할 수 있게 해준다.

_app 파일

_app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트다.
페이지에 적용할 공통 레이아웃의 역할을 한다.

function MyApp({Component, pageProps}) {
	return <Component {...pageProps} />
} 

export default MyApp
  1. Component 속성값은 서버에 요청한 페이지가 표시된다.
    http://localhost:3000/home에 접속하면 Component는 home 컴포넌트를 가리킨다.

  2. pageProps는 getInitialProps, getStaticProps, getServerSideProps 중 하나를 통해 패칭한 초기 속성값이 된다.

_document 파일

_app 다음에 실행되며, 공통적으로 활용할 head 태그나 body 태그 안에 들어갈 내용들을 커스텀할 때 활용한다.

0개의 댓글

관련 채용 정보