_app 파일

_app 파일은 넥스트에서의 루트 컴포넌트를 의미합니다. 페이지 컴포넌트가 그려지기 위해서는 App 컴포넌트가 필요한데요. 이 App 컴포넌트를 커스텀 할 수 있는 파일이 바로 _app 파일입니다. 이 _app 파일은 커스텀 앱(Custom App) 컴포넌트라고도 합니다.

_app 파일은 커스텀 할 일이 있을 때만 생성하면 되고 그렇지 않은 경우에는 넥스트 내부적으로 정의한 기본 App 컴포넌트를 사용합니다. 주로 다음 3가지 이유 때문에 커스텀을 합니다.

• 페이지 이동 시 유지할 공통 레이아웃 구성
• 페이지에 추가 데이터 구성
• 전역 CSS 추가

_app 파일 선언

App 컴포넌트를 변경하기 위해서는 다음과 같이 pages 폴더 밑에 _app.jsx 파일을 생성합니다.

pages/_app.jsx

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

위 코드의 Component 프롭스는 각 URL에 매칭될 페이지 컴포넌트를 의미합니다. pageProps는 각 페이지 컴포넌트에서 넥스트의 데이터 호출 속성을 사용했을 때의 결과를 페이지 컴포넌트에 프롭스로 전달해 줍니다. 위 코드는 기본 설정과 같은 코드기 때문에 요정도로 이해합니다.

tip

참고로 커스텀 App 컴포넌트에서는 getStaticProps, getServerSideProps 등의 데이터 호출 메서드를 사용할 수 없습니다.