[Next.js] Section 1

Next.js 란?

NextJS는 프로덕션용 React 프레임워크

ReactJS의 풀스택 프레임워크

 

React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리

-> 이는 핵심적으로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있기 때문에 라이브러리로 분류된다.

 

Next.js는 프레임워크, 즉 React 상에 구축된 프레임워크

 

핵심 기능

서버 측 렌더링 지원

NextJS가 추가하는 기능 중 가장 중요한 기능은 바로 내장된 기능인 서버 측 렌더링 지원이다.

CSR은 무엇을 구축하느냐에 따라 문제가 될 수도 있다.

 

• 데이터를 가져오는 부분에서 사용자 경험의 관점에서는 이러한 로딩이 이상적이지 않을 수 있다.
• 검색 엔진 최적화(SEO)가 중요한 경우에도 문제가 될 수 있다.

NextJS에서는 내장 서버 측 렌더링이 있어 자동으로 페이지를 미리 렌더링하기 때문에 훨씬 쉽게 작업을 할 수 있다.

 

한 가지 알아두어야 할 점은 NextJS를 사용하면 초기 로딩 혹은 초기 요청 이후에 브라우저의 표준 React 앱이 여전히 실행 중이라는 점이다.

-> 표준 싱글 페이지 애플리케이션(SPA)

기존의 특징은 유지하면서, 초기 로딩 때 미리 렌더링된 페이지를 갖게 되는 것이다.

-> NextJS를 사용하면 클라이언트 측 및 서버 측의 코드가 융합이 된다고 할 수 있다.

 

파일 기반 라우팅

기존의 React에는 라우터가 아예 없다. 일반적으로는 React Router를 사용한다.

React Router도 훌륭한 패키지이지만 별도의 코드를 작성해야한다.

하지만 NextJS로는 이런 코드 내 라우트 정의를 사용할 필요가 없게 된다.

NextJS를 사용하면, 파일과 폴더에 페이지와 라우트를 정의하게 된다.

 

풀스택 가능성

NextJS를 사용하면 백엔드 코드를 Next React 앱으로 쉽게 추가할 수 있다.