Next.js를 사용하는 이유와 장점은 무엇인가요?
순수 리액트(CSR)의 한계를 보완하는 Next.js의 렌더링 방식, 라우팅, 최적화 기능 등 핵심 장점을 정리합니다.
Next.js는 리액트 기반의 풀스택 프레임워크입니다. 리액트는 UI 라이브러리일 뿐이라, 라우팅·서버 렌더링·번들 최적화 같은 것은 직접 구성해야 합니다. Next.js는 이를 표준화된 방식으로 한꺼번에 제공합니다.
왜 쓰나요?
순수 리액트는 기본적으로 CSR이라, 초기 로딩이 느리고 SEO에 불리합니다. Next.js는 이 약점을 렌더링 전략으로 보완합니다.
- 다양한 렌더링 방식 — SSR·SSG·ISR·CSR을 페이지(또는 컴포넌트) 단위로 선택할 수 있습니다.
- 파일 기반 라우팅 — 폴더 구조가 곧 URL 경로가 되어 설정이 필요 없습니다.
- 서버 컴포넌트 — 서버에서 렌더링되는 컴포넌트로 클라이언트 번들을 줄입니다.
- 자동 최적화 — 이미지·폰트·스크립트 최적화, 코드 스플리팅이 기본 내장.
- API 라우트 — 백엔드 엔드포인트를 같은 프로젝트에 둘 수 있습니다.
- SEO 친화 — 서버 렌더링과 메타데이터 API로 검색 최적화가 쉽습니다.
핵심 장점 요약
| 영역 | 순수 리액트 | Next.js |
|---|---|---|
| 렌더링 | 주로 CSR | SSR/SSG/ISR/CSR 선택 |
| 라우팅 | 라이브러리 직접 설치 | 파일 기반 내장 |
| SEO | 불리 | 서버 렌더링으로 유리 |
| 최적화 | 직접 구성 | 이미지·번들 등 자동 |
정리하면 Next.js는 성능(초기 로딩)·SEO·개발 생산성을 모두 끌어올리려는 목적의 프레임워크입니다.
순수 리액트 대신 Next.js를 쓰는 주된 이유로 옳은 것은?
이 레슨을 다 읽으셨나요?
완료 표시는 이 브라우저에 저장됩니다.