[NextJS] NextJS 특징 및 프로젝트 시작

NextJS의 특징 

 

1) 컴파일과 번들링이 자동으로 된다. 

2) 자동 리프레시 기능으로 수정하면 화면에 바로 반영된다. 

3) 서버사이드 렌더링이 지원된다. 

 

4) next.js의 페이지는 pages 폴더 내 js, jsx, ts, tsx 파일에서 내보내진 react component이다.

 

pages/about.js -> /about로 접근가능 

pages/posts/[id].js -> pages/posts/1, pages/posts/2... [dynamic routes]

 

5) next.js는 public이라는 폴더 아래에 정적 파일을 제공한다. 

기본 URL ( /) 에서 시작하는 코드에서 내부 파일을 참조 할 수 있다.

 <img src="/images/image.png"/>

 

 

NextJS 프로젝트 생성 및 실행 

 

 

1) nextJS 프로젝트 생성

npx create-next-app [프로젝트 이름]

 

2) 프로젝트 실행 

npm run dev

 

 

 

www.youtube.com/watch?v=Ujjdn2wMIew&list=PLZKTXPmaJk8Lx3TqPlcEAzTL8zcpBz7NP