CRA와 비교한 Next.js의 장점

1. Pre-rendering

CRA에서 Server Side Rendering을 구현하기 위해서는 라이브러리 설치, 설정 변경 등 추가작업이 필요하지만 Next.js는 어떤 추가 설정 없이 페이지 요청 시 html을 생성하는 ServerSideRendering은 물론이고, build시에 html을 생성하는 Static Side Generation까지 두가지 형태의 Pre-rendering을 제공한다.

 

2. next.config.js

CRA에서는 webpack, babel 등으로 react-script로 추상화 된 설정들을 수정하기 위해 프로젝트의 복잡성이라는 리스크를 지닌 eject 명령어를 수행후 설정 파일을 수정해야 되지만 next.js에서는 webpack, babel, css-loader, babel-loader에서 추가적인 수정이 필요하다면 eject와 같은 복잡한 과정 없이 next.config.js에서 필요한 설정을 수정할 수 있다.

 

3. code-splitting

code-splitting은 페이지들이 각각의 javascript 번들로 분리하는 작업으로 코드 스플리팅을 하게 되면 한 화면에 필요한 번들만 호출하게 되어 화면이 더 빠른 속도로 로드된다.

Next.js의 기본적인 코드 스플리팅은 페이지 기준이다. Pages에 있는 컴포넌트들이 각각의 자바스크립트 번들로 분리되고 페이지가 요청되었을 때 전체 JS를 요청하는 것이 아닌 페이지 별로 번들을 요청하게 된다.

또한 Next.js는 es2020의 dynamic import를 추가 설정 없이 사용할 수 있는데, 해당 기능을 통해 동적으로 가져온 파일이나 리액트 컴포넌트 또한 관리 가능한 번들로 분리된다.

 

4. Routing

Next.js는 자체로 파일 시스템에 기반한 라우팅을 지원하고 있어서 라우팅 기능을 구현하기 위해 react-router 설치 및 라우팅 구성이 필요하지 않다.

라우팅은 pages dir 구조에 따라 정해지며, 파일의 형태에 따라 정적, 동적, 중첩 라우팅을 지원한다.