Next.js의 _app과 _document 알아보기

Next.js에는 _document, _app 두개의 기본 페이지가 있다

_app, _document는 프로젝트에 공통적으로 적용 되어야할 내용들을 작성해야한다.

 

App

App 컴포넌트는 앱이 시작할 때 가장 먼저 호출되는 컴포넌트이다.

프로젝트의 글로벌 작업들을 수행하기에 적합한 컴포넌트이다

 

예시 

• 페이지 변경 시에도 레이아웃과 상태값을 유지
• componentDidCatch를 통한 에러 핸들링
• 페이지에 추가 데이터 삽입
• Global CSS 추가
• Header, Footer와 같은 공통 레이아웃 추가

 

const App = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
	</Layout>
  );
};

export default App;

 

기본적인 _app 컴포넌트의 구조이며 props로 Component와 pageProps를 받는다

 

Component

Component는 현재 페이지를 의미하며 페이지가 변경되면 Component가 변경된다

 

pageProps

pageProps는 getInitialProps, getStaticProps, getServerProps중 하나를 통해 가져온 초기 속성값을 의미한다

 

// index.tsx
export async function getStaticProps() {
  const path = 'Home';
    return {
      props: {
        path,
      },
    };
}

 

// _app.tsx
const App = ({ Component, pageProps }) => {
  console.log(pageProps);  // {path: 'Home'}

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};

 

위 처럼 getStaticProps를 사용한다면 _app.tsx의 pageProps에 해당 값이 담긴다

 

_document

모든 페이지에서 공통적으로 사용되는 html, meta, body 태그 안에 들어갈 내용을 커스텀 할 때 사용한다

• Document는 서버에서만 렌더링 된다
• onClick과 같은 이벤트나 스타일, application 로직 등은 넣으면 안 된다
• title과 같이 각 페이지별로 변경이 될 가능성이 있는 것들은 각 페이지에 넣어야 한다

 

정리 

정리하자면 모든 페이지는 _app, _document가 실행 된 이후에 실행된다

_app이 실행된 이후에 _document가 실행된다

_app은 어플리케이션 로직, 글로벌 스타일 등 동적으로 변경될 사항들을 다룬다.

_document는 정적인 사항들에 대해 공통적인 부분을 다룬다

 

 

Reperence

https://nextjs.org/docs/advanced-features/custom-app

https://nextjs.org/docs/advanced-features/custom-document