Next.js는 2016년 10월에 ZEIT라는 회사에서 개발하기 시작한 오픈소스 리액트 프레임워크입니다. ZEIT의 목표는 1인 개발자가 손쉽게 앱을 개발하고 배포할 수 있도록 지원하는 것이었습니다. 웹 개발자가 하나의 웹 서비스를 개발하기 위해서는 단순히 웹 사이트의 화면을 개발하는 것 이외에 API 개발 및 연동, 웹사이트 배포, DNS 설정 등의 작업들이 필요합니다. 이러한 작업들을 1인 개발자가 모두 다 처리하기는 아무래도 쉽지 않겠죠.

그래서 ZEIT에서 첫 번째로 출시한 제품은 바로 now라는 웹사이트 배포 서비스였습니다. now는 당시 now.sh라는 주소로 서비스를 제공하였는데, 웹 사이트를 무료로 쉽게 배포할 수 있게 해줌으로써 많은 개발자들의 사랑을 받았습니다. 그리고 그 과정에서 리액트로 웹 애플리케이션을 개발하는 과정을 조금 더 쉽게 만들기 위해서 Next.js가 탄생하게 되었습니다. Next.js의 GitHub 저장소 첫 commit에서는 Next.js를 아래와 같이 정의하고 있습니다.

"A minimalistic framework for server-rendered React applications"

서버에서 렌더링 되는 리액트 애플리케이션을 위한 미니멀한 프레임워크라는 뜻이죠.

이러한 정의를 바탕으로 Next.js는 처음부터 아래와 같은 특징들을 가질 수 있도록 설계 및 개발되었습니다.

SSR (Server Side Rendering)

리액트에서는 기본적으로 CSR(Client Side Rendering)을 사용합니다. 그래서 초기 로딩 속도가 느리고, 검색 엔진 최적화(SEO) 측면에서도 좋지 않습니다. 하지만 이러한 문제를 해결하기 위해서 개발자가 직접 SSR(Server Side Rendering)을 개발하려면 난이도도 높을뿐더러 굉장히 복잡한 과정을 거치게 됩니다. 그래서 Next.js는 처음부터 SSR(Server Side Rendering)을 손쉽게 개발할 수 있도록 하여, 빠른 페이지 로딩 및 검색 엔진 최적화에 유리하도록 만들었습니다. 이러한 특징 때문에 Next.js는 초창기에 SSR을 위한 리액트 프레임워크로 개발자들에게 많이 알려지게 되었습니다.

SSG (Static Site Generation)

우리가 개발하는 웹 사이트에는 여러 개의 페이지가 존재할 수 있지만, 항상 모든 페이지가 동적으로 데이터가 로딩되어야 하는 것은 아닙니다. 예를 들면, 사전에 모두 작성된 블로그 글 같은 고정된 컨텐츠가 표시되는 페이지들은 정적 페이지로 제공해도 됩니다. 정적 페이지는 기존에 이미 페이지가 생성되어 있기 때문에 굉장히 빠르게 페이지를 사용자에게 보여줄 수 있으며 보안 측면에서도 유리합니다. Next.js에서는 빌드 시점에 정적 페이지들을 분류하여 자동으로 정적 페이지를 생성해주는 기능을 포함하고 있습니다.

손쉬운 라우팅 (Routing)

기존에 리액트 기반의 웹 애플리케이션에서 페이지 간에 라우팅(Routing)을 구현하기 위해서는 React Router와 같은 별도의 라이브러리를 사용해야 했습니다. 이러한 점은 리액트에 처음 입문하는 개발자에게는 하나의 진입장벽이 되기도 하였고, 복잡한 라우팅을 구현하려면 설정이 복잡해지는 문제가 있었습니다. 그래서 Next.js에서는 파일 기반의 라우팅 방식을 도입하여, 파일 및 폴더 구조에 따라 자동으로 라우팅이 되도록 단순화 시켰습니다. 그리고 참고로 이 때 개발된 Router가 Pages Router입니다. Router에 대해서는 뒤에서 더 자세히 다룰 예정입니다.

백엔드 기능 통합

만약 1인 개발자나 프론트엔드 개발자가 백엔드 서버와 API까지 모두 다 개발해야 한다면 굉장히 시간도 오래 걸리고 어려울 것입니다. 또한 서버를 배포하고 운영 및 관리하는 데에도 리소스가 많이 들어갈 것입니다. 그래서 Next.js에서는 API Routes라는 것을 통해서 간단한 백엔드 기능을 프레임워크 내에서 구현할 수 있게 만들었습니다. 이를 통해 별도의 서버 구현이나 설정 없이도 간단한 API들을 개발하고 손쉽게 연동할 수 있습니다.

최적화 (Optimization)

Next.js는 여러가지 최적화를 자동으로 제공하거나 손쉽게 적용할 수 있도록 개발되었습니다. 자동 코드 분할(Code Splitting)을 통해 번들 사이즈를 최적화하며, Hot Reloading을 통해서 개발 과정에서의 개발자 경험을 크게 향상 시켰습니다. 또한 이미지 최적화나 스타일링 같은 것들도 손쉽게 적용할 수 있도록 개발되었습니다.

지금까지 살펴본 것처럼 Next.js는 처음부터 웹 애플리케이션 개발 과정에 거의 필수적으로 필요한 기능들을 손쉽게 구현할 수 있도록 설계되었으며, 개발 과정을 단순화 시킴으로써 개발자들의 편의를 크게 향상 시켰습니다. 이러한 매력적인 점들 때문에 다른 프레임워크에 비해 굉장히 빠르게 성장할 수 있었고, 현재는 전세계적으로 가장 대표적이고 많이 사용되는 React 프레임워크가 되었습니다.

개발자 생태계에서의 빠른 성장을 발판 삼아 2020년에 ZEIT는 Vercel이라는 이름으로 사명을 변경하였고, 기존에 운영하던 now.sh라는 서비스의 이름 또한 회사의 이름과 동일하게 Vercel로 변경하였습니다. 그리고 현재 Next.js를 다음과 같이 정의하고 있습니다.

"The React Framework for the Web"