NextJS

프로덕션용 React 프레임워크, ReactJS의 풀스택 프레임워크
ReactJS 자체가 사용자 인터페이스 구축을 위한 JavaScript 라이브러리.
그러므로 React를 사용해 상호작용이 가능한 사용자 인터페이스를 만들 수 있다. ➡️ JS만 사용해서는 어려울 수 있는 복잡한 사용자 인터페이스의 구축이 용이해짐

React는 핵심적으로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있어 라이브러리로 분류된다.
일반적으로 대규모 React 프로젝트를 구축할 때는 라우팅, 혹은 인증 등의 과정을 돕는 라이브러리를 추가적으로 사용해야 한다.

즉, NextJS는 리액트 상에 구축된 프레임워크다.

프레임워크? 라이브러리?

프레임워크와 라이브러리의 차이점은?
프레임워크의 규모가 더 크고 더 많은 기능을 가지고 있다.

또 코드를 어떻게 작성해야 하는지 어떻게 파일을 구조화해야 하는지 등에 대한 더 명확한 규칙과 가이드라인이 있다.

기능을 추가해주는 NextJS

• NextJS는 리액트 앱에 다양한 기능을 추가해 주어 NextJS를 통해 모든 기능이 바로 사용 가능해지기 때문에 이미 존재하는 기능을 반복해서 구축할 필요가 없게 된다.
• 큰 규모의 앱에서 자주 발생하는 문제를 해결하기 위해 서드 파티 라이브러리를 사용하는 빈도도 줄어들게 된다.

한마디로..

The React Framework for Production

React

React 상에 구축되어 React를 사용하고 개선하기 때문에 React를 위한 프레임워크다.

Framework

많은 기능과 명확한 규칙을 포함해 NextJS는 프레임워크라 할 수 있다.

Production

프로덕션을 위해 React 앱을 준비하고, 흔히 발생하는 문제점의 해결을 위해 보편적으로 추가해야 하는 기능들을 포함하므로 프로덕션용 프레임워크다.

핵심 기능과 장점

1. 서버 측 렌더링(Server-side Rendering) 지원

서버 측 렌더링

클라이언트 측이 아닌 서버 측의 페이지 상에 렌더링되는 콘텐츠 처리
React는 클라이언트 측 라이브러리이기 때문에 렌더링은 전부 클라이언트 측에서 처리된다. ➡️서버가 아닌 사용자의 브라우저에서 처리되는 것

해당 페이지가 서버에서 미리 렌더링이 되는, 즉 요청이 서버로 도달할 때 데이터 페칭이 서버 측에서 처리된다면 모든 내용을 포함한 페이지가 사용자와 검색 엔진 사용자들에게 제공될 수 있다.

NextJS에는 내장 서버 측 렌더링이 있어 자동으로 페이지를 미리 렌더링하기 때문에 훨씬 쉽게 작업을 할 수 있다.
NextJS를 사용하면 클라이언트 측 및 서버 측의 코드가 융합이 된다.

2. 파일 기반 라우팅

기존 React에는 라우터가 아예 없다.

라우팅이란?
사용자에게 여러 개의 페이지가 있는 듯 한 착각을 불러일으키는 것으로 탐색하며 페이지를 로드하는 게 라우터의 역할(React Router)

라우터는 URL을 확인해 URL이 변경될 때 브라우저가 요청을 서버로 보내는 기본 동작을 방지하고, 그 대신에 React를 통해 페이지 상에 다른 콘텐츠를 렌더링해서 다른 컴포넌트를 보여준다.
➡️서버에 추가 요청을 보내지 않고도 URL에 기반해 화면에 나타나는 내용을 변경한다.
React를 사용하면 라우팅은 통상적으로 코드에 설정된다.

NextJS로는 이런 코드 내 라우트 정의를 사용할 필요가 없다.
NextJS를 사용하면 파일과 폴더에 페이지와 라우트를 정의한다.
추가적인 코드를 작성하지 않아도 되니 짧은 코드를 작성함으로써 작업이 간결해진다.

3. 백엔드 코드 추가

NextJS를 사용하면 NodeJS 코드를 통해 아주 쉽게 백엔드 API를 React 프로젝트로 추가할 수 있다.