[Next.js] Next.js란?

🚀 Next.js

Next.js는 Vercel에서 제공하는 React Framework이다.

Next.js는 다음과 같은 기능들을 제공한다.

1. hybird static & server rendering
2. TypeScript Support
3. smart bundling
4. route pre-fetching
5. No config needed

현재 Next.js는 많은 기업들이 사용하고 있다. 다음 링크에서 확인할 수 있다.

https://nextjs.org/showcase#all

Showcase | Next.js

 

공식 문서 페이지에 있는 내용들을 정리해보자면,

 

Hybrid: SSG and SSR

NextJS는 React의 특징인 CSR 뿐만 아니라 SSG, SSR도 가능하다.

SPA의 큰 단점 중 하나는 첫 페이지에 빈 화면을 먼저 받고, JS파일(bundle.js)을 해석하여 화면을 구성하기 때문에

이 JS파일이 크면 클 수록 로딩속도가 길어진다는 단점이 있다. 또한 JS파일을 해석해야 하기 때문에 클라이언트에 자바스크립트 엔진이 꼭 있어야 한다.

React만으로도 SSR을 구현할 수 있긴 한데 복잡하고 까다롭다.

그런데 NextJS는 SSR을 지원하기 때문에 CSR방식과 SSR방식을 병행할 수 있다(CSR만으로 하는건 불가능).

SSR의 특징인 완성된 HTML파일을 서버에서 클라이언트로 내려받게하여 초기 로딩속도를 줄이는 것도 가능하다.

Zero Config

자동 컴파일과 번들링을 제공한다.

File-system Routing

pages라는 폴더아래에 있는 모든 구성요소는 경로가 된다.

pages 폴더 밑에다가 두면 알아서 경로가 되는게 정말 편한 것 같다.

TypeScript Support

타입 스크립트 구성 및 컴파일을 지원한다.

Code-splitting and Bundling

초기 페이지 로드 시 필요한 코드를 Chunks로 분리해서 로딩한다.

전체 코드양을 줄이지는 않지만 필요로 하지 않는 코드를 로드하는 것을 피하고

필요로 하는 코드만 받기 때문에 성능을 향상시킬 수 있다.

 

이 외에도

 

Image Optimization

Internationalization

Next.js Analytics

Incremental Static Regeneration

Fast Refresh

API Routes Built-in CSS Support

 

등의 기능들을 제공한다.

나머지 기능들에 대한 설명은 차차 정리할 계획이다.