Ch 02. Nuxt.js vs Next.js — Vue와 React의 풀스택 비교

개발자 커뮤니티에서 "풀스택 프레임워크" 이야기가 나오면 Next.js가 먼저 언급됩니다. 압도적인 사용자 수와 활발한 생태계 덕분입니다. 그렇다면 Nuxt.js는 어떤 위치일까요? 한마디로 정리하면 Nuxt.js는 Vue 생태계의 Next.js입니다.

두 프레임워크는 닮은 점이 많습니다. 파일 기반 라우팅, SSR/SSG 지원, API 라우트, 자동 코드 분할. 목표도 비슷합니다. 풀스택 웹 애플리케이션을 하나의 프로젝트로 만드는 것입니다. 그러나 철학과 생태계는 분명히 다릅니다.

철학의 차이

Vue는 점진적 채택을 핵심 가치로 삼습니다. 기존 HTML 페이지에 script 태그 하나로 시작할 수 있고, 필요한 만큼만 Vue를 도입할 수 있습니다. Options API와 Composition API 중 팀 성향에 맞는 것을 고릅니다. 이 유연함이 Nuxt에도 이어집니다.

React는 단방향 데이터 흐름과 함수형 사고를 전면에 내세웁니다. Server Components, Client Components 같은 개념이 점점 중요해지고 있고, Next.js App Router는 이 방향을 강하게 밀고 있습니다. 강력하지만 진입 장벽도 높습니다.

파일 구조 비교

Nuxt와 Next는 파일 구조에서도 차이가 있습니다.

Nuxt는 pages/에 Vue 컴포넌트를 두면 라우팅이 자동으로 생성됩니다. server/api/에 TypeScript 파일을 놓으면 API 엔드포인트가 됩니다. components/와 composables/는 자동 임포트 대상입니다.

Next.js App Router는 app/ 디렉토리 하위에 page.tsx, layout.tsx, route.ts를 배치하는 방식입니다. Server Component가 기본이고, 클라이언트 상태가 필요할 때만 "use client" 지시어를 붙입니다.

채용 시장 현황

솔직하게 이야기하겠습니다. 채용 공고 절대량은 Next.js가 훨씬 많습니다. 특히 스타트업과 해외 기업에서는 React/Next.js가 사실상 표준처럼 자리잡고 있습니다.

그렇다고 Vue/Nuxt가 힘을 잃은 것은 아닙니다. 국내 중견 기업, 유럽 시장, 그리고 기존 Vue 프로젝트를 운영 중인 팀에서는 꾸준한 수요가 있습니다. Vue의 낮은 진입 장벽과 읽기 쉬운 코드 덕분에 팀 온보딩이 빠른 점도 Nuxt 선택의 이유가 됩니다.

어느 쪽이 더 좋다는 이야기가 아닙니다. Vue를 주력으로 삼고 있거나, Vue 기반 프로젝트에 투입된다면 Nuxt는 자연스러운 선택입니다. 이 책을 펼친 여러분은 이미 그 판단을 내린 것이고, 그 판단은 충분히 합리적입니다.