Next.js를 쓰는 이유가 무엇인가?

Vite나 CRA가 제공하지 않는 기능들을 제공하는 프레임워크의 성격을 갖고 있기 때문에 많이 사용되는 추세이다.

여러가지가 있겠지만 대표적으로는 아래와 같은 기능을 추가적으로 제공한다.

 

왜 쓰는 지 알고 쓰는 것과, 유행이라서 쓰는 것과는 하늘과 땅 차이라고 생각하여 정리를 하며 고민을 해볼 필요가 있다고 생각했다.

 

Next.js의 차별점

라우팅

라우팅이란, 쉽게 이야기 해서 웹 페이지를 이동하는 것을 말한다. 페이지마다 고유한 URL 세그먼트가 존재해야 페이지 별로 이동할 수가 있는데, 이것을 가능하게 만들어 주는 것이 라우팅 기술이다.

Vite나 CRA를 통해 React 프로젝트를 생성하게 되면 React-Router-Dom이라는 라이브러리를 설치해서 별도의 세팅을 해주어야 한다.

하지만 Next.js에서는 현재 14 버전의 경우 src/app 폴더 내에 폴더만 만들어도 URL segment를 갖게 되며 라우팅이 된다. 이런 점이 개발을 매우 용이하게 해준다.

또한 [id]와 같이 폴더를 만들면 동적인 라우팅을 편하게 만들 수도 있다.

렌더링

이 부분이 가장 핵심적인 기능이 아닐까 생각한다. 기존의 리액트 프로젝트는 클라이언트 사이드 렌더링 방식으로 검색 엔진에서 인덱싱 할 데이터가 없는 빈 div를 하나 브라우저에 던져주고 후에 스타일시트와 자바스크립트를 번들링해서 화면을 그리도록 던져 주는 방식으로 렌더링 하기 때문에 검색엔진이 인덱싱 할 데이터가 없어 SEO에 불리하다.

그러나 Next.js는 서버 사이드 렌더링을 지원하기 때문에 SEO에서 유리할 수 있다.

API 로직 작성

base URL을 서버컴포넌트로 호출하여 API 호출 로직을 직접 작성할 수 있다. 나는 리액트로 개발하면서 이 부분이 가장 크게 체감되었던 부분인데, 일반적인 방법으로는 클라이언트 컴포넌트에서는 API 요청 후 반환되는 값을 개발자 도구에서 감출 수 있는 방법이 없었다. 따라서 민감한 데이터를 다루는 경우 이 부분이 항상 걸렸는데, 이런 경우 Next.js에서는 API 로직을 작성하여 숨길 수도 있다.

또한 어떠한 이유로 fetch 함수 로직의 변경이 필요한 경우, 리액트에서 개발할 때 fetch 함수들을 별도의 API 폴더를 만들고 이 안에 유틸 함수로 전부 작성하면 이와 마찬가지로 유지 보수가 편리하겠지만, 모든 코드를 이렇게 뺄 순 없을 것이다. 그런데 API 파일을 작성하면 이런 백엔드 로직이 변경되었을 때 유지보수가 쉽고 빠르다.

스타일링

TailwindCSS를 기본으로 제공하여 별도의 설정을 복잡하게 할 필요가 없다. 리액트에서 TailwindCSS를 사용할 때 굉장히 복잡했다.

성능 최적화

Next.js에서는 이미지 컴포넌트 등... 이미지나 글꼴을 더 효율적으로 렌더링 될 수 있게 최적화 하는 기능을 제공하기 때문에 같은 소스로 코드를 작성한 리액트 프로젝트 대비 이 기능을 활용했을 때 더 빠른 렌더링을 기대할 수 있다.

타입스크립트 제공

Next.js에서는 타입스크립트를 기본으로 제공하기 때문에 복잡하게 설정할 필요가 없다.