Next.js 16 Preview: 무엇이 바뀌었나? (feat. 제로 번들)
Vercel이 공개한 Next.js 16 프리뷰의 핵심 기능 분석. 자바스크립트를 보내지 않는 '제로 번들' 아키텍처와 향상된 서버 액션.
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년의 웹 개발은 그 어느 때보다 쾌적할 것입니다.