[Next.js] Next.js는 무엇이고, 왜 사용하는가?

홈페이지 대문에는

프로덕션용 React 프레임워크 

라고 써져있는 Next.js

React 개발자에게, NextJS의 사용이 어떻게 도움이 되는지 알아보자

 

<기본 배경 지식>

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

ReactJS는 서드 파티 패키지로 프론트엔드 프로젝트에 추가되는 라이브러리이다.

React를 사용해 상호 작용이 가능한(개발자 입장에서 복잡한) 사용자 인터페이스를 만들 수 있다.

 

서버사이드 렌더링 : 클라이언트 측이 아닌 서버 측의 페이지 상에 렌더링되는 콘텐츠 처리를 의미함

 해당 페이지가 서버에서 미리 렌더링이 되는 즉, 요청이 서버로 도달할 때 데이터 페칭이 서버 측에서 처리된다면

모든 내용을 포함한 페이지가 사용자와 검색 엔진 사용자들에게 제공될 수 있다.

그러면 사용자들이 페이지가 깜빡이는 로딩 상태를 경험할 필요도 없고

검색 엔진을 통해서도 페이지의 콘텐츠 확인이 가능하다. 서버 측 렌더링이 문제를 해결해주는 것이다.

React 페이지, 컴포넌트를 서버 측에게 미리 렌더링 해주기에 가능하다.

 

ReactJS에는 사실 서버 측 렌더링을 추가하도록 해주는 내장 기능이 포함되어 있지만 제대로 추가하기가 상당히 어려울 수 있고

직접 거쳐야 할 설정 단계가 더 많아진다.

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

즉 NextJS를 사용해 앱을 구축하면 아무 추가 설정이 없이도 페이지를 방문하면, 서버 측에서 렌더링이 바로 되어 있는 상태가 된다.

따라서 이는 적절한 검색 엔진 최적화가 된다.

검색 엔진에서 액세스해도 콘텐츠를 볼 수 있고 사용자들은 로딩되는 깜빡임 현상을 겪지 않아서 로딩 경험 또한 개선된다.

 

NextJS를 사용하면 궁극적으로 클라이언트 측 및 서버 측의 코드가 융합이 된다.

 

파일 기반 라우팅 기능 제공

File-based Routing

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

라우팅이란 사용자에게 여러 개의 페이지가 있는 듯한 착각을 불러일으키는 것이다.

라우터는 URL을 확인해 URL이 변경될 때

브라우저가 요청을 서버로 보내는 기본 동작을 방지하고(서버에 추가 요청을 보내지 않고도),

그 대신에 React를 통해 페이지 상에 다른 콘텐츠를 렌더링한다.

URL에 기반해 화면에 나타나는 내용을 변경(다른 컴포넌트를 보여주는 것)이 바로 라우팅이다.

 

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

그리고 개별 폴더에 페이지로서 작동하는 컴포넌트를 저장하는데

이 컴포넌트가 코드 내에서 라우트 설정을 모방한다고 볼 수 있다.

 

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

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

pages라는 폴더에 페이지가 지원한느 라우트(Route)와 경로(Path)를 구조화하게 된다.

중첩 라우드, 혹은 동적 매개변수를 사용하는 동적 라우트 등을 모두 지원한다.

 

 

ReactJS의 풀스택 프레임워크   

NextJS를 사용하면, 개발자들이 React 프로젝트에 백엔드 코드를 추가하는 작업도 수월하게 할 수 있다.

서버 측 사전 렌더링을 통한 클라이언트 측 코드 뿐만 아니라

예를 들어 파일 시스템으로 작동을 하거나 데이터베이스로 전달이 되는 독립적인 백엔드 코드도 포함하는 풀스택 React 프로젝트가 있을 때 NextJS를 사용하면 NodeJS 코드를 통해 아주 쉽게 백엔드 API를 React 프로젝트로 추가할 수 있다.

데이터베이스, 혹은 파일로 데이터를 저장하는 코드나

데이터를 가져오거나 인증을 추가하는 등의 코드를 추가하는 작업 NextJs를 사용하면 아주 간편해진다. 

그러면 독립적인 REST API 프로젝트를 구축할 필요 없이 하나의 프로젝트로 작업을 하면서

React 사용자 인터페이스인 클라이언트 측의 코드도 전부 추가할 수 있으며

백엔드 API 코드와도 융합이 가능하다.

 

 

next 프로젝트 만드는 방법

next 프로젝트를 만들고 싶은 폴더에서 아래 명령어치고 엔터!

npx create-next-app