Next.js 16: 핵심 변경 사항 및 추가 기능 정리

Next.js 16: 핵심 변경 사항 및 추가 기능

Next.js 16의 가장 중요한 변화는 Turbopack 기본 번들러 채택과 React 19 및 React Compiler 지원으로 요약할 수 있습니다.

---

성능 및 개발 경험(DX) 향상

구분	주요 내용	설명
기본 번들러	Turbopack 기본 채택 (Stable)	Rust 기반의 Turbopack이 이제 모든 앱의 기본 번들러로 사용됩니다. 기존 Webpack 대비 최대 4배 빠른 로컬 개발 및 2~5배 빠른 프로덕션 빌드 속도를 제공합니다.
컴파일러	React Compiler (Stable) 지원	자동 컴포넌트 메모이제이션을 기본으로 지원하여, 수동으로 useMemo, useCallback 등을 사용할 필요 없이 불필요한 리렌더링을 줄여 성능을 향상시킵니다.
캐싱	Turbopack 파일 시스템 캐싱 (Beta)	개발 모드에서 컴파일 아티팩트를 디스크에 저장하여, 재시작 시 컴파일 시간을 단축합니다.
디버깅	Next.js DevTools MCP 통합	Model Context Protocol (MCP)을 통해 AI 도구 및 에이전트가 앱의 라우팅, 캐싱, 렌더링 동작 등을 더 깊이 이해하고 상황에 맞는 디버깅 도움과 제안을 제공합니다.
로깅	향상된 로깅	개발 및 빌드 과정의 각 단계별 소요 시간을 상세하게 출력하여 병목 지점 파악 및 최적화가 용이해졌습니다.

---

라우팅, 렌더링 및 캐싱 개선

구분	주요 내용	설명
라우팅	향상된 라우팅 및 내비게이션	페이지 전환 속도 개선. 특히, 여러 URL을 프리페칭할 때 공유 레이아웃을 한 번만 다운로드하는 레이아웃 중복 제거(Layout Deduplication) 기능이 추가되었습니다.
렌더링	Partial Prerendering (PPR) 안정화	정적(Static) 부분과 동적(Dynamic) 부분을 효율적으로 결합하여, 초기 로드 시간을 단축하고 페이지의 정적 셸을 즉시 제공합니다.
캐싱 API	Cache Components	명시적인 캐싱 모델을 제공하여, 개발자가 캐싱할 대상을 직접 지정하고 재검증 시점을 제어할 수 있게 되어 캐싱 동작의 예측 가능성이 높아졌습니다.
캐싱 API	revalidateTag() 시그니처 변경	SWR(Stale-While-Revalidate) 동작을 위해 이제 두 번째 인수로 cacheLife 프로필을 필수로 요구합니다.
API	refresh() API 추가	Server Action 수행 후, 캐시되지 않은 동적 데이터만 새로고침할 수 있는 서버 측 API가 추가되었습니다 (클라이언트의 router.refresh() 보완).

---

동작 변경 및 마이그레이션 필요 사항

Next.js 16으로 마이그레이션 시 주의해야 할 주요 변경 사항입니다.

• middleware.ts → proxy.ts 리네임: 미들웨어 파일의 이름이 proxy.ts로 변경되었습니다. 기능은 동일하지만 용도를 명확히 하기 위한 변경입니다. (마이그레이션 코드가 제공됩니다.)
• 이미지 최적화 기본값 변경:
  • images.minimumCacheTTL 기본값이 60초에서 4시간(14400초)으로 변경되어 캐시 제어 헤더가 없는 이미지의 재검증 비용이 절감됩니다.
  • images.imageSizes 기본값에서 16이 제거되었습니다.
• Parallel Routes의 default.js 필수화: 모든 Parallel Route 슬롯에 이제 명시적인 default.js 파일이 필요합니다. 파일이 없으면 빌드가 실패합니다.
• Next.js CLI 도구: ESLint Flat Config 형식으로 기본 설정이 변경됩니다.

💡 Codemod 사용 권장: Next.js 팀은 마이그레이션을 돕기 위해 코드를 자동으로 업데이트해주는 npx @next/codemod@canary upgrade latest 명령어를 제공하고 있습니다.

자료 링크 (Resources)

구분	링크	내용
공식 릴리즈 노트	Next.js 16 Release Notes (Vercel Blog)	Next.js 16의 공식 출시 발표 및 세부 정보
업그레이드 가이드	Next.js Upgrading: Version 16 (Docs)	버전 16으로 업그레이드하기 위한 공식 가이드, codemod 사용법 포함
핵심 기능 정리	Next.js 16: What's new, and what it means for frontend devs (LogRocket Blog)	프론트엔드 개발자 관점에서 핵심 변경 사항과 그 의미를 분석한 글

Next.js 16은 React 19의 새로운 기능과 Turbopack의 속도를 기반으로 차세대 웹 애플리케이션 개발을 위한 중요한 발판을 마련했습니다.