NextJS (2) 라우팅, 데이터로딩, 공통페이지
라우팅, 데이터로딩, 공통페이지 설정
◼︎ NextJS - Routing : pages 폴더에 파일을 만들면 파일 경로에 따라 자동으로 라우팅 설정됨
- "/" : pages/index.js | index.jsx | index.tsx
- Link 컴포넌트
import Link form "next/link"
...
<Link href="/tomato">
<p>Move to "/tomato"</p>
</Link>
- 동적 라우팅
[name].jsx
◼︎ NextJS - Static File (정적파일) : public 폴더에 폰트, manifest.json, robots.txt, favicon.ico, 이미지 등 정적 파일 보관
◼︎ NextJS - Data Loading : 넥스트는 모든 페이지를 사전 렌더링. 두 가지 형태의 사전렌더링 존재
1) 정적 생성 : 빌드 시 페이지를 HTML로 만들어 요청 시 제공
2) SSR : 페이지 요청 시 SSR을 통해 HTML 생성해 제공 (외부데이터 필요시)
- getServerSideProps
- getStaticProps
- getInitialProps
◼︎ NextJS - Styled-jsx : CSS-in-JS 라이브러리, css를 캡슐화하고 범위가 지정되게 만들어 구성요소를 스타일링.
◼︎ NextJS - _app : 모든 페이지의 공통 페이지 역할
- 페이지들의 공통된 레이아웃
- 페이지를 탐색할 때 상태 유지
- 추가데이터를 페이지에 주입
- 글로벌 CSS 추가
◼︎ NextJS - _document : 사용자 정의 Document, <html> <body> 태그를 보강하는데 사용
- CDN 폰트 적용
◼︎ NextJs - _error : 빌드된 프로덕션 환경에서 에러 발생시 에러페이지 표출
