Next.js

Next.js 란??

간단한 React 전용 서버사이드 프레임워크. 

(Universal React Application 의 Server Rendering을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크)

* Universal : 어디서든 작동한다는 의미. 

+ Next.js 제약사항 : 각 route에 해당하는 파일들은 소문자로 pages (directory)에 넣어야함. 나머지는 자유.

Next.js 의 기능..

1. 간단한 client side routing

2. Hot Module Replacement를 지원하는 Webpack 기반 작업환경

3. Express 나 어떤 Node.js 서버와 함께 사용 가능

4.  Babel / Webpack 환경 설정 커스터마이징 가능

....등등.

Directory 구성

.babelrc - babel 설정

.next (dir)

components (dir) - 공용 컴포넌트를 이용해 필요한 컴포넌트만 불러오도록 구성할수 있음. (Ex. Layout.js)

next.config.js - webpack 설정 커스터마이징 가능. 

node_modules (dir) - 추가된 모듈 디렉토리

package.json

pages (dir) - 라우팅 루트 구성, 페이지 관련 컴포넌트들을 꼭 여기에 넣어야함. 

yarn.lock

* 외부 데이터 가져오기

- getInitialProps를 사용. .. prefetch 가능. (ex. <Link prefetch href="...">

* pages/_document.js

- 여러페이지에서 공통적으로 사용하는 Header를 설정할 경우에는 pages 디렉토리에 _document.js 를 사용.. 

* 스타일링 사용 (CSS)

- styled-jsx, styled-components, SASS

* zeit 의 'now' 서비스.

- 프로젝트를 완성하고 릴리즈할때 사용하는 명령어.