[Next js] document와 app

이한형·2022년 7월 18일

_document, _app

Next js에는 두 가지 중요한 기본 페이지가 있습니다.
바로 _document와 _app입니다.

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

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

export default MyApp

상태관리 라이브러리의 Provider를 감싸거나 공통의 레이아웃을 이용해야한다면 _app 파일을 이용합니다.

_document는 _app 다음에 실행되며 공통적으로 활용할 <head>나 <body> 태그 안에 들어갈 내용들을 커스텀할때 사용합니다.

주로 폰트를 import 하거나 charset, 웹 접근성 관련 태그 설정을 하기 위해서 사용을 합니다.
그 외에도 styled-component를 ssr하기 위해 사용하기도 합니다.

풀스택 개발자를 지향하는 개발자