[Next.js] Start Build

본 포스팅은 youtube 코딩앙마 님의 강의영상으로 학습한 내용입니다.

Build

Next.js 앱을 빌드하기위해 create-next-app@latest을 이용했다. CRA와 같은 방식으로 짧은 시간내에 앱 빌드를 할 수 있다.

기본 기능

• 컴파일과 번들링이 자동으로 된다. (webpack, babel)
• 자동 refresh 기능으로 코드를 수정하면 화면에 바로 반영된다.
• SSR, SSG 을 지원한다.
• Static file을 지원한다.

파일 구조

create-next-app으로 빌드된 앱의 초기 폴더들은 다음과 같다.

• pages
  페이지 파일들이 담겨 있는 폴더이다. next.js는 별도의 routing 라이브러리 없이 pages에 넣으면 자동으로 routing이 설정된다. 파일 이름이 곧 params이 되는 것이다.

• publics
  next.js는 static file을 지원한다. 주로 이미지 파일들이 이 폴더에 담길텐데, 별도의 import 없이 아마 이미지를 사용할 수 있을 것 이다.

• styles
  css 파일들이 모여 있는 폴더다.