본문으로 건너뛰기
개발

Next.js 16 Preview: 무엇이 바뀌었나? (feat. 제로 번들)

Vercel이 공개한 Next.js 16 프리뷰의 핵심 기능 분석. 자바스크립트를 보내지 않는 '제로 번들' 아키텍처와 향상된 서버 액션.

이동욱 프론트엔드 리드 14분 읽기
Next.js 16 Preview: 무엇이 바뀌었나? (feat. 제로 번들)
Next.js 16 Preview: 무엇이 바뀌었나? (feat. 제로 번들) / 이미지 출처: Unsplash
광고 영역

2025년 12월, 드디어 Next.js 16의 프리뷰 버전이 공개되었습니다. Next.js 15가 안정화(Stability)에 집중했다면, 이번 16 버전은 **성능의 극한(Extreme Performance)**을 추구합니다.

프론트엔드 리드로서 직접 베타 버전을 설치해보고, 실무에서 체감할 수 있는 핵심 변화 3가지를 정리했습니다. 특히 **제로 번들(Zero Bundle)**이라는 개념이 어떻게 구현되었는지 집중적으로 살펴봅니다.

1. Zero Bundle: HTML is Back

React 앱을 띄우기 위해 수백 킬로바이트의 JS 파일을 다운로드하던 시대는 끝났습니다. Next.js 16은 가능한 한 클라이언트로 JS를 보내지 않는다는 철학을 극단적으로 밀어붙였습니다.

1.1 서버 전용 상태 머신

이전에는 useState를 쓰려면 무조건 클라이언트 컴포넌트(use client)로 전환해야 했습니다. 하지만 Next.js 16에서는 간단한 토글이나 탭 전환 같은 UI 로직을 서버에서 미리 계산된 CSS와 HTML 속성으로 변환합니다.

// Next.js 16: JS 없이 작동하는 탭 컴포넌트 (컴파일 타임 최적화)
export default function Tabs() {
  // 클라이언트 JS 번들에 포함되지 않음!
  // 순수 HTML 체크박스 핵(Checkbox Hack)이나 Popover API로 자동 변환됨
  return (
    <ServerToggle>
      <Tab title="A">Content A</Tab>
      <Tab title="B">Content B</Tab>
    </ServerToggle>
  );
}

결과적으로 브라우저가 다운로드하는 자바스크립트 크기는 0KB가 될 수 있습니다. 이는 TTI(Time to Interactive)를 획기적으로 단축시킵니다.

2. 향상된 Server Actions: 폼(Form) 그 이상

Server Actions가 처음 나왔을 때는 단순히 API 라우트를 대체하는 용도였습니다. 하지만 16 버전에서는 실시간 양방향 통신이 가능해졌습니다.

2.1 스트리밍 액션 (Streaming Actions)

서버 액션이 실행되는 동안, 진행 상황(Progress)을 클라이언트로 스트리밍할 수 있습니다.

async function processData() {
  'use server';
  const stream = createStream();

  // 10% 진행.. 50% 진행..
  // 별도의 웹소켓 서버 없이 HTTP 스트리밍으로 전송
  await longRunningTask(stream);
}

이제 파일 업로두나 AI 응답 생성 같은 긴 작업을 처리할 때, 복잡한 웹소켓 설정 없이도 프로그레스 바를 구현할 수 있습니다.

3. Turbopack Stable: 이제 진짜 빠르다

Next.js 13부터 베타였던 터보팩(Turbopack)이 드디어 정식(Stable) 버전이 되었습니다.

  • Webpack 대비 700배: 과장이 아닙니다. 대규모 모노레포 환경에서 HMR(핫 리로딩) 속도가 눈에 띄게 빨라졌습니다.
  • 메모리 사용량: Rust로 작성된 덕분에 빌드 시 메모리 점유율이 절반 이하로 떨어졌습니다. CI/CD 파이프라인 비용 절감에도 큰 도움이 됩니다.

4. 부분적 프리렌더링(PPR)의 완성

정적 페이지(Static)와 동적 페이지(Dynamic)의 구분이 사라졌습니다. 하나의 페이지 안에서 헤더는 정적으로(빌드 타임), 장바구니는 동적으로(런타임) 렌더링하는 **PPR(Partial Prerendering)**이 기본값(Default)으로 활성화됩니다.

개발자는 더 이상 export const dynamic = 'force-dynamic' 같은 옵션을 고민할 필요가 없습니다. 프레임워크가 코드를 분석해 알아서 최적의 렌더링 전략을 선택합니다.

5. 결론: 배워야 할 것이 줄었다?

역설적이게도 Next.js 16은 개발자가 알아야 할 것을 줄여주는 방향으로 진화했습니다. 최적화, 캐싱, 번들링 설정을 프레임워크가 알아서 해주기 때문입니다.

우리는 이제 next.config.js를 수정하는 시간이 아니라, 사용자에게 어떤 가치를 줄 것인가를 고민하는 시간에 더 집중할 수 있게 되었습니다. 2026년의 웹 개발은 그 어느 때보다 쾌적할 것입니다.

광고 영역

공유하기

관련 기사