너와 나의 프로그래밍
Next.js - _app.js, _document.js, _error.js 본문
Next.js - _app.js, _document.js, _error.js
Whatever App's 2021. 5. 3. 23:02
Next.js에 없어서 안될 공통 페이지 _app, _document, _error 페이지들이다.
처음에 CLI로 Next.js를 설치를 하면 기본적으로 _app는 자동적으로 생성이 된다.
그러나 _document, _error는 자동적으로 생성되지 않기 때문에 따로 만들어줘야한다.
그럼 그 세개의 공통페이지들의 역할이 뭘까?
./pages./_app.js
페이지를 맨 처음 초기화해주는 아주 중요한 녀석이다. 이녀석이 없으면 앱이 실행되지 않는다.
React.js나 Vue.js에 꼭 필요한 app.js라고 보면 된다.
이 페이지는 처음 초기화를 해줄 뿐더러 페이지를 탐색할 때 상태 유지를 해주고 페이지들의 공통된 레이아웃을 담당해준다. 또 초기 데이터를 페이지에 주입(pageProps)해주고 Global CSS를 추가할 수 있다.
보통 Header, Side, Footer를 공통된 Component로 두고 싶을 때 여기서 먼저 Component를 주입시켜주면 된다.
./pages./_document.js
_document.js는 없어서는 안될 존재(그러니까 없어도 실행은 되니까...)는 아니지만 그래도 있어야 좋다. 아니 있어야한다.
_document.js는 Next.js에서 사용될 기본적인 html 태그의 대한 보강을 해준다. <head>안에 스타일을 넣거나, cdn을 추가해서 스크립트를 넣거나, 외부 스크립트 파일을 주입하거나하는 일반적인 React, Vue에서 사용하는 index.html를 사용한다고 생각하면 될 것 같다.
외부 Font나 meta 정보, App의 title등 프로젝트를 생성하는데 있어 너무 중요한 역할을 해준다.
./pages./_error.js
_error.js는 말 그대로 에러코드의 대한 Custom한 Error 생성 페이지를 만드는데 도움을 준다. 이 페이지도 물론 없어서는 안될 존재다.
기존 404, 500에러같이 국민에러 페이지들을 Next.js에서 제공해주는 페이지로 사용한다면 굉장히 디자인적으로도 좋지 않을 뿐더러 이걸 그대로 사용하는 프로젝트는 아마 없을 것이다.
가장 장점은 일반 페이지들과 똑같이 pages 폴더 안에 _error라는 이름 하나로 에러페이지를 생성할 수 있다는 점이다.
일반적인 _error.js 페이지는 500 에러가 발생 했을 때 나오는 Custom 에러 페이지로 에러코드에 따라 Custom하게 에러를 보여주는 것이 가능하다. 간단하게 500.js는 500에러 페이지를 나타내고 404 에러 페이지 같은 경우에는 404.js로 생성해 주는 것만으로도 에러페이지를 쉽게 만들 수 있다.
'Front-End > Next.js & React.js' 카테고리의 다른 글
| React.js - List Item Toggle 리스트 아이템 토글 (0) | 2021.05.29 |
|---|---|
| React.js - useState, useEffect (0) | 2021.05.05 |
| Next.js - styled-jsx (0) | 2021.05.01 |
| Next.js - getServerSideProps, getStaticProps (0) | 2021.04.22 |
| [Next.js] 정적 라우팅과 동적 라우팅 (0) | 2021.04.21 |
