NEXT.js는 기능에 비해 상대적으로 그 개념이 배우기 쉬운 프레임워크다. 그렇게 남의 프로젝트에 숟가락 얹어서 작업을 하다가 혼자 독립된 작업을 해야하는 순간이 와 버렸다. NEXT.js 튜토리얼을 따라하면 기본 개념은 금방 잡히지만 역시나 술에 물탄 듯, 물에 술탄 듯 쓱 지나가는 몇가지가 있다. 오늘 그 중에서 _document.js _app.js 에 대해서 알아보고자 한다.

_document.js

원래 NEXT.js는 위에 언급한 언더바로 시작하는 파일들을 생략할 수 있다. 이건 어딘가에 만들어져 있다는 얘기다. 커스터마이징을 하려면 pages/_document.js 를 생성하고 그 안에 내용을 넣으면 된다.

_app.js

이 역시 생략할 수 있는 녀석이다. 하지만 입맛에 맞게 작성하려면 이 역시 커스터마이징을 해야한다.

만들어져 있던 구조를 보고 있노라면 저 둘 중에 누구에게 먼저 들어와서 로딩이 되는지 순서를 가늠하기가 좀 어려웠다. 왜 나는 야매로 먹고 사는 개발자니까.. (그래서 이렇게 글도 남기고 공부도 하고..)

오늘 잘하는 개발자에게 좀 배운 내용은 _document.js 로 들어와서 _app.js 를 둘러보고 _app.js에서 부르는 레이아웃 관련 템플릿들을 읽어들이고 거기서 조립하고 내려보내는 (왜 NEXT.js는 서버렌더링을 하니까) 그런 구조로 이해했다.

앞으로 혼자 NEXT.js와 react.js 를 갖고 개발을 해야하는데 좌충우돌 개발기를 남겨보겠다.