Next.js를 생성해서 살펴보면 pages에 기본적으로

_app.tsx, _document.tsx 파일이 생성되어 있다.

_app은 서버로 요청이 들어왔을 때, 가장 먼저 실행되는 컴포넌트이다. 보통 페이지 공통 레이아웃을 _app에서 작성하고 한다.

위에서 설명했듯이 즉 모든 컴포넌트에 공통으로 사용할 속성들을 관리한다고 생각하면 된다.

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

의 모양으로 구성되어 있다.

여기서 몇가지 규칙이 있다.

1. Component 속성값은 서버에 요청한 페이지이다.

• http://localhost:3000/login으로 접속하면 Component는 login 컴포넌트를 가리킨다.

1. pageProps는 getInitialProps, getStatisProps, getServerSideProps 중 하나를 통해 fetch된 초기 속성값이 된다.

2. _app 파일에서도 getInitialProps를 사용해 모든 페이지에서 공통으로 사용할 속성을 지정할 수 있다. 하지만 Automatic Static Optimization

   (자동 정적 최적화)이 비활성화 되기 때문에 모든 페이지가 서버 사이드 렌더링을 통하여 제공된다.

3. 3번의 경우 정말 꼭 사용하여야 한다면 next/app에 App 객체를 불러온 후 사용한다.