Next.js를 왜 사용할까

Next.js를 왜 사용할까

실무에서 아쉽게도 사용하진 못했지만 많은 회사들에서 이미 사용하고 있는 프레임워크. React 코어 팀과 Vercel(Next.js)의 공식 파트너십까지 맺으며 프론트엔드 웹시장에서 둘의 영향력은 더 견고해지는 것 같다. 한편으론 Next.js 점점 복잡해지는 기능 때문에 사용을 꺼려한다는 얘기도 들었지만 상당한 장점도 많은 프레임워크이다 현직 개발자 분들에게 물어본것들과 직접 공부하면서 느낀 Next.js 사용하는 대표적 이유 5가지를 보자

1. 첫 화면을 그리는 방식의 차이 (CSR vs SSR/SSG)

• 기존 React (CSR 방식): 브라우저가 접속할 때 서버로부터 받는 HTML은 빈 껍데기(<div id="root"></div>) 상태입니다. 브라우저가 거대한 자바스크립트(JS) 파일을 전부 다운로드하고, 해석하고, 실행한 뒤에야 비로소 화면이 그려집니다. 이로 인해 자바스크립트를 다운로드하는 동안 유저는 흰 화면(Blank Screen)을 오래 보게 됩니다.
• Next.js (SSR/SSG 방식): 서버에서 이미 글, 이미지, 데이터가 채워진 완성된 HTML을 먼저 만들어서 브라우저에 내려줍니다. 브라우저는 자바스크립트 파일을 다 내려받지 않더라도 서버에서 온 완성된 HTML을 즉시 화면에 띄우기 때문에 유저가 체감하는 초기 로딩 속도(FCP, LCP 지표)가 압도적으로 빨라집니다.

2. 'Zero Bundle Size' 서버 컴포넌트 (RSC)

• 웹 서비스의 규모가 커질수록 자바스크립트 파일 크기(번들 사이즈)가 늘어나 초기 로딩을 둔화시킵니다.
• Next.js의 서버 컴포넌트는 무거운 라이브러리(날짜 처리, 마크다운 변환 등)나 데이터 로직을 서버에서만 실행하고 그 결과만 전달합니다. 브라우저가 다운로드해야 할 자바스크립트 코드 양 자체가 줄어드므로 초기 로딩 시간이 대폭 단축됩니다.

3. 번들 분할(Code Splitting)과 리소스 최적화 자동화

• 자동 코드 분할: 접속한 페이지에 필요한 자바스크립트 파일만 나누어서 쪼개 내려받기 때문에, 전체 사이트 코드를 한 번에 로드하지 않습니다.
• 내장 최적화 컴포넌트: <Image>, <Font> 등 내장 컴포넌트가 최신 압축 포맷(WebP, AVIF) 변환 및 폰트 렌더링 최적화를 알아서 적용해 초기 화면에 뜨는 미디어 용량을 크게 줄여줍니다.

4. 직관적인 파일 기반 라우팅과 DX(개발자 경험) 향상

• 이유: React에서는 페이지를 이동할 때마다 react-router-dom 같은 별도 라이브러리를 설치하고 라우트 설정을 복잡하게 구성해야 합니다.
• Next.js의 강점: 별도 라이브러리 없이 폴더와 파일 구조만으로 URL 경로가 자동으로 생성되는 파일/폴더 기반 라우팅을 지원합니다. 설정에 드는 시간이 절약되고 직관적인 아키텍처 덕분에 개발 생산성이 크게 향상됩니다.

5. Vercel과의 연동을 통한 원클릭 배포 및 호스팅 최적화

• 이유: 기존에는 웹 서비스를 배포하려면 서버(AWS, Nginx 등)를 세팅하고, 빌드 스크립트를 작성하고, SSL 인증서(HTTPS)를 적용하는 등 복잡한 DevOps(인프라) 작업이 필요했습니다.
• Next.js의 강점: 개발사인 Vercel 플랫폼과 연동하면 git push 한 번으로 빌드·배포·도메인 연결·SSL 적용이 자동으로 완료됩니다. 뿐만 아니라 전 세계 Edge Network(CDN)를 활용한 서버리스 배포 환경이 기본 제공되어 글로벌 속도와 호스팅 편의성을 동시에 잡을 수 있습니다.