Next.js에서 _app.js와 _document.js의 역할

박윤택·2021년 10월 24일
3

next.js

목록 보기
2/2
post-thumbnail

next.js를 공부하다 보면 폴더 구조 중에 _app.js와 _document.js를 마주치게 된다.

_app.js

App 컴포넌트는 모든 페이지의 공통 페이지 역할을 수행
1. 페이지들의 공통된 레이아웃
2. 페이지를 탐색할때 상태 유지
3. 추가 데이터를 페이지에 주입
4. 글로벌 css 추가

의 기능을 수행하며, 리엑트의 기본 앱에는 body에 마진이 들어가 있는 상태이므로 _app.js에서 style jsx에 global을 추가해서 margin을 없애 모든 페이지에 적용할 수 있다.

_document.js

일반적으로 응용프로그램 <html><body> 태그를 보강하는데 사용.
<title>, <description>, <meta> 등 프로젝트으 ㅣ정보를 제공하는 HTML 코드 작성 가능.
폰트나 외부 api, cdn 등을 불러오도록 할 수 있음.
CSS-in-JS으 ㅣ서버 사이드 렌더링을 위한 설정을 할때 사용.

0개의 댓글