1. 개념

React

Facebook(Meta)에서 개발한 자바스크립트 라이브러리
사용자 인터페이스(UI)를 구축하기 위한 컴포넌트 기반 라이브러리
선언적 프로그래밍과 컴포넌트 재사용성에 중점을 둠

Next.js

Vercel에서 개발한 React 기반의 프레임워크
React 위에 구축되어 추가적인 기능과 구조를 제공
React 애플리케이션 개발을 위한 완전한 솔루션을 제공

2. React vs Next.js

렌더링 방식

React	Next.js
기본적으로 CSR만 지원	CSR, SSR, SSG, ISR 등 다양한 렌더링 방식을 지원
초기 로딩 시, 비어 있는 HTML이 전송되고, 자바스크립트가 실행된 후 콘텐츠가 표시됨	페이지별로 적합한 렌더링 전략을 선택할 수 있음
SEO에 불리하며, 초기 로딩 성능이 상대적으로 느릴 수 있음	SEO 친화적이며, 초기 로딩 성능을 개선할 수 있음

라우팅 시스템

React	Next.js
자체 라우팅 기능이 없어 React Router와 같은 추가 라이브러리가 필요	파일 시스템 기반의 내장 라우팅을 제공
라우팅 설정을 수동으로 구성해야 함	`pages` 또는 `app` 디렉토리에 파일을 생성하면 자동으로 경로가 설정됨
	동적 라우팅, 중첩 라우팅, 라우트 그룹 등 고급 기능을 지원

개발 환경 설정

React	Next.js
프로젝트 시작을 위해 Webpack, Babel 등의 도구 구성이 필요
(Create React App을 사용하면 간소화되지만 여전히 제한적)	즉시 사용 가능한 개발 환경을 제공
최적화, 코드 분할 등을 직접 구성해야 함	즉시 사용 가능한 개발 환경을 제공
	`Hot Module Replacement(HMR)`와 `Fast Refresh`를 지원

데이터 페칭

React	Next.js
데이터 페칭을 위한 특별한 패턴이 없음	다양한 데이터 페칭 방법을 제공
◦ `getServerSideProps`: 서버 사이드 렌더링
◦ `getStaticProps`: 빌드 시 데이터 페칭
◦ `getStaticPaths`: 동적 경로 생성
◦ `App Router`에서는 `React Suspense`와 통합된 데이터 페칭
`useEffect` 훅이나 외부 라이브러리를 사용하여 클라이언트에서 데이터를 가져옴	서버 컴포넌트에서 직접 데이터베이스나 API 호출 가능

빌드 및 배포

React	Next.js
정적 파일만 생성하므로 정적 호스팅 서비스에 배포	정적 사이트와 서버 사이드 렌더링을 모두 지원
서버 기능이 필요한 경우 별도의 백엔드 서버가 필요	빌드 시 최적화된 정적 파일과 서버 컴포넌트를 생성
	`Vercel`과 같은 플랫폼에 쉽게 배포 가능

API 개발

React	Next.js
백엔드 API는 별도로 개발해야 함	API 라우트 기능을 통해 동일한 프로젝트 내에서 API를 개발 가능
프론트엔드와 백엔드를 분리해서 관리	서버리스 함수로 자동 배포됨

성능 최적화

React	Next.js
성능 최적화를 직접 구현해야 함	자동 이미지 최적화, 폰트 최적화, 코드 분할 등을 기본으로 제공
코드 분할, 지연 로딩 등을 수동으로 설정해야 함	성능 분석 도구와 최적화 제안을 제공