#04 Next.js (Pages Router) + TypeScript : _app, _document, 404

1. _app.tsx

> Components = pages 폴더 하단에 있는 pages 컴포넌트

> pageProps : getServerSideProps, getStaticProps, getStaticPaths 등 데이터 패칭을해서 가져온 결과값

> Next.js의 root component에 해당하는 파일

=> CRA의 index.js나 App.jsx에 해당하는 파일이라고 생각해 무방  

• 사용 예시
  • 모든 페이지의 공통 레이아웃
  • 글로벌 CSS적용
  • 초기값 설정

next.js > Custom App > pages/_app.tsx

2. _document.tsx ( Pages Router에서만 사용됨)

> HTML 구조를 커스텀 할 때 사용하는 파일

> 오직 Server Side에서만 렌더링 됨 (useEffect 사용 불가능)

> Styled Component와 같은 CSS-in-JS를 Server Side Rendering 할 때 사용하는 패턴

> CSS와 같은 스타일이 초기 HTML 렌더링 시에 적절하게 적용될 수 있도록 돕습니다.

• • 예시) styled-components 사용시 document.js가 없으면 초기에 깜빡거림.

Proㅋㅋps, getStatic

next.js > Custom App >  pages/_document.tsx

 

3. 404.tsx

// pages/404.tsx
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

 

4. 참고자료

https://nextjs.org/docs/pages/building-your-application/routing/custom-document

Routing: Custom Document | Next.js

 

끝.