Next.js란?

간단히 말하면 react 라이브러리의 프레임워크이다.
근데 이미 많은 사용자들이 있는 react에 프레임워크가 필요한가? 그 이유는 아래와 같다.

• 많은 사용자들이 Next.js를 사용하는 이유는 SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)이 가능하다는 이유를 뽑았다. 기본적으로 React는 Client Side Rendering(CSR)을 한다. 이는, 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있다. 반면, next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다. pre-reloading은 SSR 뿐만 아니라 정적 사이트 생성(SSG)도 가능하게 해준다.
  *추가적으로, SSR과 CSR도 혼합하여 사용 가능하다.

Next.js 제공기능

1. pre-reloading

• next.js 설명글에서 자세히 풀었음으로 생략한다

2. page-routing

• next.js에서는 생성한 디렉토리의 컴포넌트를 export하면 route로 제공된다.

3. client-side navigation

• link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 별도의 로딩 없이 매끄러운 페이지 이동이 가능하다.

4. code-split

대부분의 사용자들은 웹페이지가 3초 이상 로딩될 시 이를 느리다 판단한다. 코드 분할은 웹의 첫 페이지가 로딩될 때, 거대한 javascript payload를 보내는 것이 아니라, 번들을 여러 조각으로 조각내어서 처음에 가장 필요한 부분만 전송해 주는 방식을 통해 어플리케이션 로드 타임을 줄여준다. 코드 분할은 webpack, parcel, rollup 등의 모듈 번들러도 지원하고 있는 기능이지만 next.js를 사용하면 별도의 설정없이 자동으로 프로젝트에 적용할 수 있다.