Next.js의 구석구석

프로젝트를 처음 시작할 때 터미널을 통해 이것저것 설치가 끝나면 생성되는 기본 모듈

...내가 어려우니까 파헤쳐보자

📚Next JS 의 프레임워크적 특성 //

_app.js

1. Next.js에 기본 제공되는 App은 pages 안 페이지에 가기위해 항상 겨처가는 길
   
   
   서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트, 페이지에 적용할 공통 레이아웃

• index.js에 접근하려고 해도 _app.js를 먼저 들리게 된다..
  

2. _app.js를 통해 페이지 커스터마이징

• 
  --> 모든 컴포넌트에 공통적으로 적용할 속성을 관리
• Componenet 속성값은 서버에 요청한 페이지
• pageProps는 getInitialProps를 사용할 경우 공통 속성값 지정은 가능하지만 자동 정적 최적화가 비활성화되어 모든 페이지가 서버 사이드 렌더링을 통해 제공

_document.js

1. _app 다음에 실행되며, 공통적으로 활용할 < head >나 < body> 태그 안 들어갈 내용들을 커스텀할때 활용
2. Document 클래스를 상속받는 클래스 컴포넌트로 작성해야만 하며, 렌더 함수는 꼭 < Html >, < Head >, < Main >, < NextScript> 요소를 리턴

📝

모든 페이지는 _app과 _document 를 거쳐간다

_app 이후에 _document가 실행된다

_app은 어플리케이션 로직, 글로벌 스타일 등을 다룬다

_document는 HTML 마크업 자체에 집중