Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. React Components를 사용하여 사용자 인터페이스를 구축하고, Next.js를 사용하여 추가 기능과 최적화를 수행합니다. 또한 번들러 및 컴파일러와 같은 하위 수준의 도구를 자동으로 구성합니다. 대신 제품을 구축하고 빠르게 배송하는 데 집중할 수 있습니다. 개인 개발자이든 더 큰 팀의 일원이든, Next.js는 인터랙티브하고 역동적이며 빠른 리액트 애플리케이션을 구축하는 데 도움을 줄 수 있습니다.
[출처: Next.js 공식문서]
위는 Next.js 공식문서의 첫 페이지의 소개 내용이다. 이를 조금 더 깊게 이해하기 위해서 등장 배경을 조금 더 알아보기로 했다.
등장 배경
프론트엔드 등장 이전에는 서버 개발자가 JSP와 같은 템플릿 엔진을 사용하여 웹 개발을 수행하였다. 하지만 더 많은 상호 작용이 이뤄져야 하는 현대의 웹에서 템플릿 엔진만으로 개발하는 것은 한계를 보였다. 이러한 방식은 구현이 단순하고 초기 웹 환경에서는 충분히 효과적이었으나, 페이지 단위의 갱신으로 인해 사용자 경험 측면에서 한계를 지니고 있었다.
템플릿 엔진
HTML에 고정되거나 변동되는 데이터를 채워 넣는 과정을 담당하는 도구
AJAX의 등장
이후, Ajax(Asynchronous JavaScript and XML)의 등장으로 서버와의 통신을 비동기적으로 처리할 수 있게 되었고, 전체 페이지를 새로 고치지 않고도 필요한 데이터만을 교환할 수 있게 되었다. 이로 인해 데이터 교환 레이어와 프레젠테이션 레이어가 분리되었고, 사용자는 보다 매끄럽고 즉각적인 웹 인터랙션을 경험할 수 있게 되었다.
프론트엔드과 백엔드 영역의 분리
이러한 변화는 클라이언트 측 JavaScript의 역할을 크게 확장시켰다. 서버는 점차 HTML을 생성하는 역할에서 벗어나 데이터를 제공하는 API 서버로 전환되었고, 클라이언트는 전달받은 데이터를 기반으로 화면을 구성하는 책임을 맡게 되었다. 이 과정에서 프론트엔드와 백엔드의 역할이 명확히 분리되었으며, 프론트엔드는 기본적인 HTML 위에 JavaScript 번들을 실행하여 동적으로 UI를 구성하는 독립적인 영역으로 자리 잡게 되었다.
SPA의 등장
이 흐름 속에서 React와 같은 SPA(Single Page Application) 라이브러리가 등장하였다. SPA는 페이지 전체를 다시 로드하지 않고도 상태 변화에 따라 화면을 갱신함으로써 뛰어난 사용자 경험을 제공하였다. 그러나 모든 렌더링을 클라이언트에서 수행하는 구조는 초기 로딩 지연, 검색 엔진 최적화(SEO)의 어려움, 라우팅 및 코드 분할과 같은 공통 문제를 개발자가 직접 해결해야 한다는 한계를 동반하였다.
Next.js의 등장
Next.js는 이러한 SPA 기반 개발의 한계를 보완하기 위해 등장하였다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅, 코드 분할 등 웹 애플리케이션에 반복적으로 요구되는 기능을 프레임워크 차원에서 기본 제공함으로써, 개발자가 인프라와 구조 설계에 과도한 부담을 지지 않도록 한다. 이를 통해 React의 선언적 UI 개발 방식은 유지하면서도, 성능과 SEO, 초기 로딩 문제를 효과적으로 해결할 수 있는 구조를 제공한다.
결국, 라이브러리인 React와 달리 Next.js는 프레임워크로서 애플리케이션의 구조와 실행 흐름을 일정 부분 규정한다. 이는 기능 구현의 주도권이 전적으로 개발자에게 있지 않음을 의미하며, 대신 검증된 패턴과 기본 설정을 통해 일관된 개발 경험과 생산성을 제공한다는 점에서 Next.js의 등장 의의를 찾을 수 있다.
