Next.js (1)

FullStack / Web Application / Framework

Full stack

프론트는 => React로 구현
qordpsem => Express.js로 구현

Server sid Rendering지원

Server에서 JS가 실행되기 때문에 JS가 실행되지않는 환경에서도 실행가능한 장점이 있다.

설치

Visual Studio
Node.js(LTS)

1. Visual Studio에서 Next를 실행하기 위한 폴더를 생성
2. 터미널에서 (Next.js 프로젝트 생성)

	npx create-next-app@latest .

npm - node실행
create-next-app : next-app을 생성
latest: 버전(최신)

3. 프로젝트 실행

	npm run dev

기본적으로 3000포트에서 실행됨

실행

src/app/layout.js가 기본적인 골격을 구성
layout.js안에 있는 {children}이 화면을 구성하고
{children}은 page.js를 불러온다.

배포시 유의사항

기본적인 크롬 개발자도구(Network)에서 확인하는
Resources의 크기 6.3MB면 큰 용량이다.
이러한 큰 용량은 비효율적이고 보안상 위험이 있을 수 있다.

node.js기반으로 만들어지는 프로젝트의
package.json에서 "scripts"라는 구성요소는
해당 프로젝트를 유지보수하는 명령어가 포함되고있고

"scripts":{
	"dev": "next dev",
    "build": "next bulid",	//배포판 생성
    "start": "next start",	//배포판 실행
    "lint": "next lint"
}

npm run build명령어를 사용하면
.next폴더에 빌드된 결과물이 들어가고
npm run start를 사용하면 실사용 배포판이 실행되고
이러한 배포판을 개발자도구(Network)에서 확인하면 Resources의 크기는 295kB로 축소된다.