초기세팅_Next.js

Next.js

• 서버사이드 렌더링(SSR)프레임워크로
• 검색엔진최적화
• 빠른 초기 로딩 속도
• 새로고침시 화면 깜빡임이 없음
• pages 폴더는 라우터로 사용됨(구조짤때 신경써야함, 폴더 트리가 곧 주소창 경로)

ServerSide Cycle

1. Next Server가 GET 요청을 받는다.
2. 요청에 맞는 Page를 찾는다.
3. _app.js의 getInitialProps가 있다면 실행한다.
4. Page Component의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
5. _document.js의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
6. 모든 props들을 구성하고, _app.js > page Component 순서로 rendering.
7. 모든 Content를 구성하고 _document.js를 실행하여 html 형태로 출력한다.

설치

npx create-next-app-> 프로젝트명 기입
cd 프로젝트명
npm run dev

package.json의 script 확인

{
	"scripts": {
    	"test": "echo \"Error: no test specified\" && exit 1",
	    // webpack-dev-server 로 가동
	    "dev": "next dev",
	    // 프로젝트를 빌드하여 .next폴더 생성
	    "build": "next build",
	    // 빌드된 .next를 기준으로 서버를 가동한다.
	    "start": "next start",
	    // html 파일을 내보내기 해준다.
	    "export": "next export"
    }
}

참고 블로그