Next.js 사용하는 이유

Next.js 사용하는 이유

Next.js란

NextJS는 대규모의 양산형 React 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공하는 React 프레임워크이다.

하지만 대규모의 React 프로젝트를 구축하려면 보통 라우팅에 필요한 라이브러리나 인증에 필요한 라이브러리들을추가해야 한다.

NextJS는 React를 기반으로 하는 프레임워크로 라이브러리보다 더 크고 기능이 많다.

또한 코드를 작성하는 방법이나 파일을 구성하는 방법에 관한 명확한 규칙과 지침이 있다.

이를 이용해서 대규모 React 앱을 편리하게 구축할 수 있다.

Next.js의 주요 기능

1. 서버사이드 렌더링

NextJS에서 추가된 가장 중요한 기능은 서버 사이드 렌더링을 내장하고 있다는 것이다.

React만 이용해서 만든 일반적인 React 앱에서 읽어 들인 React 페이지의 소스 코드를 확인해 보면 페이지가 처음에 꽤 많이 비어있다.

React는 클라이언트 사이드 자바스크립트 라이브러리라서 모든 렌더링은 클라이언트 쪽에서 일어난다.

이게 반드시 큰 문제는 아니고 무엇을 만드는지에 따라 다르지만 문제가 될 수도 있다.

페이지가 서버에서 데이터를 받아와서 목록을 화면에 보여줘야 한다면 사용자는 데이터 요청을 진행하는 동안 처음에 로딩 상태를 보게 된다.

이게 반드시 문제인 건 아니지만 사용자에게 이런 상황을 겪게 하고 싶진 않을 수 있다.

또한 검색 엔진 최적화가 중요하다면 역시 문제가 될 수 있다.

검색 엔진으로 찾아야 하는 콘텐츠가 많이 있는 페이지인 경우에는 검색 엔진 최적화가 중요하다.

사용자는 클라이언트 사이드 렌더링에서는 목록을 볼 수 있지만 검색 엔진 크롤러는 서버에서 들어온 비어있는 초기 HTML 페이지만 본다.

이럴 때 서버 사이드 렌더링이 필요하다.

서버에서 해당 페이지를 사전 렌더링한 상태에서 서버에 요청이 들어 왔을 때 해당 데이터를 서버에서 가져오면 완성된 페이지가 사용자와 검색 엔진 크롤러에게 제공된다.

서버에서 React 페이지, 즉 React 컴포넌트를 사전 렌더링할 수 있다.

ReactJS에서도 서버 사이드 렌더링을 추가할 수 있는 기능이 내장되어 있긴 하지만 제대로 구현하기가 까다로울 수 있다.

반면 NextJS에는 서버 사이드 렌더링이 내장되어 있기 때문에 NextJS에서는 훨씬 쉽다.

NextJS를 이용하면 초기 요청으로 읽어 들인 후에도 여전히 브라우저에서 기본 React 앱과 싱글 페이지 애플리케이션을 실행할 수 있다.

결국 NextJS에서는 클라이언트와 서버 사이드 코드를 혼합하여 사용한다.

2. 파일 기반 라우팅

라우팅이란 사용자에게 여러 페이지가 있는 것처럼 착각하게 하는 것이다.

탐색하고 다른 페이지를 로딩하는 것이 라우터의 역할이며 보통은 React 라우터 라이브러리를 사용한다.

이 라우터는 기본적으로 URL을 감시하다가 URL이 바뀌면 백엔드 서버에 요청을 보내는 브라우저의 기본 동작을 막고 대신 React를 사용하여 페이지에 다른 콘텐츠를 렌더링한다.

React 라우터는 좋은 패키지이고 잘 작동하지만 추가로 코드를 작성해야 한다.

페이지 역할을 하는 컴포넌트를 별도의 폴더에 저장하고 해당 컴포넌트를 라우트 설정한다.

NextJS는 파일과 폴더를 이용해서 페이지와 라우트를 정의한다.

NextJS 애플리케이션에는 특수 페이지 폴더인 pages가 있고 페이지가 지원하는 라우트와 경로를 정의한다.

HTML과 CSS, 기본적인 자바스크립트로 개발을 시작한다면 파일들이나 파일이 있는 폴더의 이름을 이용해서 파일 간 탐색을 할 수 있고 파일을 서로 연결할 수 있다.

NextJS는 이렇게 가장 기초적이면서도 이해하기 쉬운 라우팅 개념을 사용하고 중첩 라우팅이나 동적 매개변수를 이용한 동적 라우팅같이 우리에게 필요한 모든 기능을 지원한다.

3. 풀스택 프레임워크

NextJS는 풀스택 프레임워크이고 NextJS를 사용하면 개발자가 React 프로젝트에 백엔드 코드를 쉽게 추가할 수 있다.

풀스택 React 프로젝트를 구축하려면 클라이언트 쪽 코드만 있어서도 안 되고 파일 시스템에서 작업한다거나 데이터베이스에 접근할 수 있도록 백엔드 코드도 있어야 한다.

NextJS에서는 NodeJS 코드를 이용해서 React 프로젝트에 백엔드 API를 쉽게 추가할 수 있다.

그러면 독립적으로 REST API 프로젝트를 구축하지 않아도 되고 하나의 프로젝트에 클라이언트 쪽 코드와 React 사용자 인터페이스를 추가하고 백엔드 API 코드와 혼합한다.