[NextJS] Next.JS 란 무엇인가?

Next.js는 React 라이브러리의 프레임워크 이다.

Next.js를 사용하는 가장 큰 이유는 SEO를 위한 Server Side Rendering을 가능하게 하기 때문이다.

 

리액트는 기본적으로 Client Side Rendering을 한다. 따라서 웹사이트를 요청하면 클라이언트에서 HTML을 구성하기 때문에 첫 로딩시간도 길고, SEO에 취약하다는 단점이 있다.

 

Next.js없이는 SSR이 구현이 안되는 걸까?

꼭 그렇지는 않다. 리액트만으로도 SSR을 구현 할 수 있고, SPA에서 SSR을 구현하지 않고도 SEO 최적화를 하는 방법도 존재한다. 하지만 위 방법들은 이미 진행된 React에서 새로운 프레임 워크를 도입하는것이 리팩토링 등 꽤 많은 비용이 드는 작업이기 때문에 다른 방법을 선택하는 것이고, 만약 새로 시작하는 프로젝트라면 깔끔하게 Next.js로 시작하는것이 더욱 심플하다.

 

Next.js의 좋은 기능

Next.js는 pre-rendering뿐만 아니라 페이지 기반 라우팅 시스템도 제공한다. 프로젝트의 가장 바깥 폴더이 /pages 폴더에 컴포넌트를 export하면 폴더명이 페이지 route가 된다.

또한 컴포넌트에 /컴포넌트/[id] 와 같이 대괄호를 씌워서 동적 라우팅(dynamic route)도 지원한다.

 

Next.js는 <Link/> 컴포넌트를 통해 페이지간 빠르고 매끄러운 이동을 가능하게 한다. HTML의 a태그와 달리 페이지를 리로딩하지 않고도 페이지간 이동이 가능하고 link컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 링크를 클릭 했을 때 매우 빠르게 해당 페이지로 이동할 수 있게 해준다.

 

자동으로 Code Splitting을 지원한다. 보통 리액트에서 번들크기가 크면 여러 조각으로 조각내어 첫 로딩시 필요한 부분만 전송해 주는 방식으로 로딩시간을 줄이곤 한다. 하지만 Next.js에서는 dynamic import를 사용하여 모듈이 호출될 때만 모듈을 import한다. 즉 사용될 때만 import 하는 것이다.

 

이 외에도 built-in-CSS, Image Optimization, fast refresh, 서버리스 함수로 api 엔드포인트를 만드는 API routes 등 기능도 지원한다.