Next.js란 무엇이며 React에 비해 무엇을 더해 주나요?

Question

IT Interview Practice · Accepted Answer

**Next.js**는 풀스택 React **프레임워크**입니다. React 자체는 단지 UI 라이브러리일 뿐이라서 컴포넌트를 렌더링하지만, routing, 데이터 페칭, 서버 렌더링, 빌드 도구는 여러분의 몫으로 남겨 둡니다. Next.js는 이 모든 것을 기본으로 제공하며, 여기에 서버 런타임까지 더해 줍니다. ## React만으로는 빠지는 부분 (그리고 Next.js가 더하는 것) ```text React (라이브러리) → Next.js (프레임워크)가 더하는 것: ────────────────────────────────────────────────── UI 렌더링만 담당 → 파일 기반 routing (폴더 = 라우트) 클라이언트 렌더링 → 서버 렌더링(SSR), 정적 생성(SSG), ISR 데이터 페칭 직접 연결 → 내장 데이터 페칭 + 캐싱 백엔드 없음 → API 라우트 / Route Handler (풀스택) 수동 번들링 → 무설정 빌드, 코드 스플리팅, 최적화 수동 → next/image (자동 최적화 이미지), next/font ``` ## 구체적인 예시: 라우트는 그저 파일 하나 ```tsx // app/about/page.tsx → 자동으로 /about 경로로 제공됨 export default function About() { return

About us

; } ``` 순수 React에서는 라우터를 설치하고, 라우트를 구성하고, 빌드를 설정해야 합니다. Next.js에서는 파일을 만드는 것 *자체가* 라우트가 됩니다. ## 팀이 Next.js를 선택하는 이유 - **SEO 및 성능** — 서버에서 렌더링된 HTML은 콘텐츠가 초기 응답에 포함된다는 뜻입니다(크롤러에 유리하고 첫 페인트가 빠름). 빈 페이지를 보낸 뒤 hydration하는 클라이언트 전용 React SPA와 대조됩니다. - **하나의 프로젝트에서 풀스택** — 프론트엔드와 백엔드(API 라우트, Server Action)가 함께 존재합니다. - **프로덕션에 바로 쓸 수 있는 기본값** — 자동 코드 스플리팅, 이미지/폰트 최적화, 캐싱. ## 왜 중요한가 Next.js는 가장 인기 있는 React 프레임워크입니다. React를 UI 라이브러리에서 완전한 애플리케이션 플랫폼으로 바꿔 주기 때문입니다. 렌더링 전략, routing, 데이터, 백엔드를 처리해 주므로 여러분은 배관 작업 대신 기능에 집중할 수 있습니다. React로 SEO, 성능, 또는 서버 사이드 로직이 필요할 때 Next.js는 기본 선택지입니다.

React만으로는 빠지는 부분 (그리고 Next.js가 더하는 것)

구체적인 예시: 라우트는 그저 파일 하나

팀이 Next.js를 선택하는 이유

왜 중요한가

관련 질문