TIL 44 day [Next.js] _app.js와 _document

next.js를 공부하게되면서 특별한 js 파일 2가지를 알게되었다.
_app.js 와 _document.js이다.

이 둘은 SSR을 위해 있는 파일로 각각 어떤 역할을 하는지 이해할 필요가 있어서 짧게 정리해본다.

공통점

• 실행 시 가장 먼저 실행된다.
• 둘 다 pages 폴더 내에 위치한다.
• server only file로 client단에 쓰는 함수인 window, addEventListner등의 함수를 쓰면 안 된다.

1) _app.js

• 제일 처음 실행되는 파일이다.
• client에서 띄우길 바라는 전체 component의 layout이다.
• 공통 layout을 설정 할 수 있다.
• _app.js의 component prop은 활성화된 page를 말한다. 따라서 route에 따라 이동? 될 때마다 component는 새로운 페이지로 변한다.
• pageProps는 빈 객체로 data fetching methods의 하나로 페이지에 사전 로드(preloaded)되는 초기 prop이다. 그렇지 않을 경우 빈 객체이다.

2) _documnet.js

• _document.js는 html과 body 태그를 보강하기 위한 파일이다. next.js 페이지가 주변 문서의 마크업 정의를 건너 뛰기 때문에 필요하다.
• static html을 구성하기 위해 _app.js에서 구성된 html body가 어떤 형태로 들어갈지 구성하는 곳이다. 즉, content들을 브라우저가 html로 이해하도록 구조화 시키는 곳이다.

※ _document.js에 application logic 넣으면 안 된다.
browser는 Main을 제외한 다른 component들을 initialize하지 않는다. 공통된 application logic이 필요하면 _app.js를 활용