Next.js 입문 — React와 무엇이 다른가, 왜 쓰나

React 시리즈를 막 끝낸 사람한테 가장 많이 오는 질문 — "그럼 Next.js 는 또 뭐예요?". 채용 공고는 React 70~80%, Next.js 가 그 절반쯤에서 따라붙는다. "React 알면 됐지" 싶은데 회사 가 보면 죄다 Next 라 당황한다.

1편은 코드보다 큰 그림. React 와의 관계, 왜 또 배우는지, 어떤 사람에게 어울리는지 — 2편 본격 시작 전 좌표부터 박는다.

1. Next.js 는 "메타 프레임워크" — React 위에 얹는 것

한 줄 정리는 이렇다 — Next.js = React + 라우팅 + 서버 렌더링 + 이미지/폰트/번들/배포 통합. React 가 UI 그리는 함수까지만 책임진다면, Next.js 는 그 함수를 실제 웹사이트로 굴리는 데 필요한 나머지를 다 갖다 붙인다.

그래서 부르는 이름이 메타 프레임워크. "프레임워크를 감싸는 프레임워크" 정도. 같은 결의 도구로 Remix·SvelteKit·Nuxt 가 있다.

2. React vs Next.js — 차이는 정확히 어디서 갈리나

"React 로 다 만들 수 있는데 왜 Next.js?" — 답은 "안 해도 되는 결정을 안 해도 됨" 이다. React 만으로 사이트를 만들면 라우터 고르고, 빌드 도구 고르고, 서버 렌더링 직접 붙이고, 이미지 최적화 라이브러리 찾고, 배포 환경 세팅하고… 첫 페이지 띄우기 전에 이미 5~6개 결정이 쌓인다. Next.js 는 그 결정들을 기본값으로 미리 박아 둔다.

요약하면 React 는 자유, Next.js 는 합의된 기본값. 1인 사이드 프로젝트는 어느 쪽도 되지만, 팀이 5명을 넘기면 "다음 사람이 와도 이해할 수 있는 구조" 가 필요해서 Next.js 가 이긴다.

3. Next.js 가 가져온 5가지 무기

왜 굳이 React 위에 한 겹을 더 쌓았느냐 — 그만한 이유가 있다. 핵심 5가지.

① 파일 시스템 라우팅

app/about/page.tsx 파일을 만들면 /about 경로가 즉시 생긴다. React Router 처럼 별도로 <Route> 등록 코드 쓸 필요 없음. 폴더 구조 = 사이트 구조.

② 서버 컴포넌트 (RSC)

Next.js 14/15 의 핵심. 컴포넌트가 서버에서 실행되면서 DB·외부 API 를 직접 호출하고 HTML 만 브라우저로 보낸다. 첫 로딩이 빠르고 클라이언트 JS 번들도 작다.

③ 이미지·폰트 자동 최적화

next/image 가 WebP 변환·반응형·lazy 를 알아서 처리하고, next/font 는 Google Fonts 를 셀프 호스팅으로 바꿔 외부 요청을 없앤다. 라이트하우스 점수가 그냥 올라간다.

④ API Routes

app/api/hello/route.ts 만 만들면 /api/hello 가 서버 엔드포인트. 백엔드 서버 없이도 폼·웹훅·인증 콜백이 한 저장소 안에서 끝난다.

⑤ Vercel 1-클릭 배포

Next.js 를 만든 회사 Vercel 이 배포 플랫폼도 같이 운영한다. GitHub 푸시 → 자동 빌드 → CDN 배포까지 1분. AWS·Cloudflare 도 지원하지만 Vercel 이 가장 매끄럽다.

4. 언제 쓰고, 언제 쓰지 마라

모든 프로젝트가 Next.js 일 필요는 없다. 솔직한 가이드.

Next.js 가 잘 맞는 경우

• SEO 가 중요한 사이트 — 블로그·미디어·랜딩·이커머스. 서버 렌더링이 검색에 결정적.
• 풀스택 한 저장소 — 백엔드 따로 안 두고 빠르게 출시할 때.
• 5인 이상 팀 — "다음 사람이 이해할 구조" 강제가 이득.
• Vercel/Cloudflare 배포 — 인프라 관리 없이 사이트만 만들 때.

오히려 안 맞는 경우

• 어드민 SPA 대시보드 — 로그인 사용자만 보는 콘솔. SEO 무의미, CSR 로 충분.
• 가벼운 정적 사이트 — HTML 한 장이면 끝. Astro·순수 HTML 이 더 가볍다.
• React 학습 초기 — Next 의 추상화에 가려 상태·effect 등 본체 개념이 흐려진다. React 시리즈 먼저 끝내고 오는 게 정답.

5. 첫 코드 — App Router 의 "Hello World"

2편에서 본격 설치하지만, 미리 어떤 모양인지 보고 가자. 폴더 구조와 가장 간단한 페이지 컴포넌트.

가장 간단한 app/page.tsx:

React 만 알면 즉시 읽힌다. 다른 점은 단 하나 — 이 파일이 서버에서 먼저 실행된다. fetch('https://api.example.com/posts') 를 컴포넌트 안에서 직접 호출할 수 있고, DB 도 직접 부를 수 있다. 결과 HTML 만 브라우저로 간다. React Server Component 의 가장 큰 변화.

요약 — Next.js 좌표

여기까지 핵심을 한 번 더. Next.js 는 React 위에 얹는 메타 프레임워크이고, 라우팅·SSR·이미지·API·배포가 한 묶음으로 따라온다. 다섯 무기 — 파일 라우팅·서버 컴포넌트·이미지/폰트 최적화·API Routes·Vercel 배포 — 가 합쳐져서 SEO·풀스택·팀 프로젝트에 강력하다. 어드민 SPA 나 React 학습 초기엔 오버킬이지만, 회사 가면 거의 만나니까 한 번은 정리해 둘 가치가 있다. 2편에서 create-next-app 으로 첫 프로젝트를 만든다.