9주차 위클리 페이퍼 (Next.js의 장점)

Next.js를 React보다 선호하는 주요 이유

항목React (기본)Next.js

라우팅	수동 설정 (react-router-dom 등 설치 필요)	파일 기반 자동 라우팅
서버 사이드 렌더링 (SSR)	기본 지원 없음 (직접 구현 필요)	기본 지원 (SSR, SSG, ISR 등)
정적 사이트 생성 (SSG)	불편함	getStaticProps 등으로 간단하게 가능
API 라우트	별도 서버 필요 (예: Express)	API Routes 내장
이미지 최적화	직접 처리	next/image 컴포넌트 제공
SEO 최적화	CSR로 인해 불리	SSR/SSG로 훨씬 유리
성능 최적화	수동 설정 많음	자동 코드 분할, lazy loading 등 기본 제공
배포	본인이 세팅해야 함 (Vite, Webpack 등)	Vercel 같은 플랫폼과 최적화되어 있음

---

📌 구체적인 예시로 비교

React만 사용할 경우:

• 페이지 이동 시 react-router-dom 설치하고 라우팅 설정 필요
• SEO 최적화가 어려움 (CSR만 되므로)
• 서버에서 데이터를 가져오려면 복잡한 setup 필요 (예: Express 서버 따로 만들기)
• 이미지 최적화, 퍼포먼스 튜닝을 직접 해야 함

Next.js를 사용할 경우:

• pages/ 폴더에 파일만 만들면 자동으로 라우팅
• getServerSideProps로 SSR, getStaticProps로 SSG 간편 지원
• /api 폴더에 파일 추가만으로 API 엔드포인트 생성
• 배포도 Vercel을 통해 쉽게 가능 (CI/CD, 프리뷰 URL 등 지원)