사용자 검수 전 — React와 Next.js는 같은 물건이 아니다. React가 UI의 부품과 갱신 원리를 제공한다면, Next.js는 그 부품으로 여러 주소를 가진 웹 애플리케이션을 만들고 실행하는 공통 결정을 묶어 제공한다.
§ 00 · React는 라이브러리, Next.js는 프레임워크
라이브러리는 특정 문제를 해결하는 도구를 제공하고, 애플리케이션의 나머지 구조는 개발자가 선택하게 둔다. React의 중심 문제는 컴포넌트로 UI를 표현하고 데이터 변화에 맞춰 갱신하는 것이다.
프레임워크는 애플리케이션 전체를 구성하는 규칙과 실행 환경을 제공한다. Next.js는 React를 렌더러로 사용하면서 파일 기반 라우팅, 레이아웃, 서버·클라이언트 실행 경계, 데이터 처리, 빌드와 배포에 필요한 기본 구조를 묶는다. Next.js는 React의 대체품이 아니라 React를 포함해 조직하는 상위 층이다.
§ 01 · React만 알면 남는 결정들
React만으로도 브라우저 UI를 만들 수 있다. 하지만 여러 페이지의 URL을 어떻게 정의할지, 첫 화면을 서버에서 만들지 브라우저에서 만들지, 데이터를 어디서 읽을지, 코드를 어떻게 나눠 내려보낼지, 검색 엔진과 공유 카드에 어떤 HTML을 줄지는 React 핵심 API가 하나의 답으로 정하지 않는다.
개발자는 라우터와 빌드 도구를 직접 조합할 수도 있고, 이 결정을 묶은 프레임워크를 선택할 수도 있다. Next.js는 후자다. 그러므로 React를 배우는 일과 Next.js를 배우는 일은 겹치지만 동일하지 않다. JSX와 State는 React의 언어이고, page·layout·route 같은 규칙은 Next.js의 언어다.
§ 02 · Next.js가 더하는 것
라우팅은 폴더와 특별한 파일을 URL과 화면에 연결한다. 레이아웃은 여러 페이지가 공유하는 껍데기를 정의한다. 렌더링은 페이지를 미리 만들거나 요청 시 서버에서 만들거나, 필요한 상호작용을 브라우저에서 이어받게 한다.
그 밖에도 서버에서의 데이터 접근, 로딩·오류·404 UI, 이미지와 글꼴 최적화, 코드 분할, 메타데이터, 서버 엔드포인트 같은 기능을 한 체계 안에 둔다. 모든 기능을 반드시 써야 하는 것은 아니다. 중요한 점은 서로 충돌할 수 있는 도구 선택을 프레임워크가 하나의 규칙으로 정리한다는 것이다.
§ 03 · 서버와 클라이언트를 한 컴포넌트 트리로 본다
Next.js의 App Router에서는 페이지와 레이아웃이 기본적으로 서버에서 실행되는 컴포넌트다. 서버 컴포넌트는 데이터 원천 가까이에서 읽고, 비밀값을 브라우저에 보내지 않으며, 내려보낼 JavaScript를 줄이는 데 유리하다.
State, 이벤트 핸들러, useEffect, 브라우저 API가 필요한 부분은 클라이언트 컴포넌트가 맡는다. “use client”는 파일을 브라우저 쪽 모듈 그래프의 경계로 표시한다. 서버 컴포넌트와 클라이언트 컴포넌트는 경쟁 관계가 아니라, 정적인 일과 상호작용하는 일을 한 트리 안에서 나누는 역할이다.
§ 04 · 중요한 조합이지만 유일한 조합은 아니다
여러 URL, 서버 데이터, 검색 노출, 공유 메타데이터, 정적 생성과 서버 렌더링이 필요한 웹사이트라면 React와 Next.js의 조합은 많은 결정을 한 번에 해결한다. React의 컴포넌트 모델을 유지하면서 애플리케이션 전체의 길을 얻는 것이 조합의 장점이다.
반대로 작은 위젯, 학습용 화면, 브라우저 안에서만 동작하는 단순 도구라면 React만 사용하거나 다른 빌드 도구·프레임워크를 고를 수 있다. Next.js를 쓴다고 자동으로 좋은 앱이 되는 것도 아니다. 프레임워크는 결정을 없애는 것이 아니라, 반복되는 결정을 기본값과 규칙으로 줄인다.
Read this note at sass.studio.