노트

Next.js 16 변경점

Next.js 16

프런트엔드#nextjs · 연결된 개념 12개

쉽게 말하면

Next.js 16은 번들러를 Turbopack으로 바꾸고, 캐시를 '알아서 해 주는 것'에서 '보관할 것만 직접 표시하는 것'으로 바꾼 메이저 버전이에요. 이사할 때 챙길 짐에만 스티커를 붙이는 셈이죠.

비유가 깨지는 곳 스티커만 붙이면 끝나진 않아요. params와 cookies는 반드시 await해야 하고, middleware는 proxy로 바뀌고, revalidateTag엔 두 번째 인자가 필요해요. 그래서 가이드와 codemod를 같이 봐야 해요.

Next.js 16(2025년 10월 정식)은 Turbopack 기본화와 명시적 캐싱(Cache Components)이 핵심인 메이저 버전이다. 2026년 기준 업그레이드 가이드에서 중요한 것만 추린다.

  • Turbopack이 기본 번들러: next dev와 next build 모두 기본이다. Webpack은 옵트아웃으로 계속 쓸 수 있다(번들러)
  • Cache Components: cacheComponents: true로 켠다. 기본은 매 요청 실행이고 캐시할 곳만 'use cache'로 표시한다. 실험 플래그였던 PPR(Partial Prerendering)과 dynamicIO가 이 모델로 합쳐졌다(부분 사전 렌더링(PPR))
  • 캐시 API(Application Programming Interface) 변경: revalidateTag(tag, profile)에 두 번째 인자(cacheLife 프로필)가 필요해졌다. 방금 쓴 값을 바로 보여 주는 updateTag(서버 액션 전용)가 추가됐다
  • React 19.2: App Router가 React 19.2를 포함한 최신 Canary를 써서 Activity, useEffectEvent, View Transitions를 쓸 수 있다
  • React Compiler 지원 안정화: reactCompiler 옵션이 정식이 됐지만 기본으로 켜져 있지는 않다(React Compiler)
  • 비동기 요청 API 강제: params, searchParams, cookies(), headers()를 반드시 await한다(15에서 도입, 16에서 동기 접근 제거)
  • middleware → proxy: 파일 이름이 proxy.ts로 바뀌었다. 기능은 같고 Node.js 런타임에서 돈다. edge 런타임이 필요하면 아직 middleware를 쓴다
  • 요구 사항: Node.js 20.9 이상, TypeScript 5.1 이상
  • 제거: AMP(Accelerated Mobile Pages) 지원, next lint 명령(ESLint나 Biome를 직접 실행), 런타임 설정(serverRuntimeConfig 등). next/legacy/image, images.domains는 지원 중단(deprecated)
  • next/image 기본값(캐시 TTL(Time to Live), 품질 목록 등)과 병렬 라우트의 default.js 요구 같은 세부 변경이 있으니 업그레이드 때는 공식 가이드와 codemod를 같이 본다

16.3에서 달라진 것

16.3 문서의 버전 기록 기준으로 추린다. 대부분 Cache Components를 전제로 한다.

  • Partial Prefetching: partialPrefetching: true로 켜는 opt-in. 링크마다가 아니라 라우트마다 App Shell 하나를 prefetch한다(부분 사전 렌더링(PPR))
  • 즉시 이동 검증: 세그먼트 설정 instant와 DevTools의 Navigation Inspector로 이동을 막는 코드를 찾는다
  • next/root-params: app/[locale] 같은 루트 세그먼트 값을 props 없이 서버 컴포넌트 어디서든 읽는다(next-intl과 서버 컴포넌트 친화 i18n)
  • catchError(next/error)가 정식이 됐다. error.js 파일 대신 컴포넌트 단위로 에러 경계를 만든다. error.js의 retry도 정식이 됐다
  • 빌드 캐시: Turbopack 파일 시스템 캐시가 next build에도 기본으로 켜진다. 빌드 환경이 .next/cache를 보존하지 않으면 turbopackFileSystemCacheForBuild: false로 끈다
  • 불변 정적 자산: 어댑터가 지원하면 바뀌지 않은 청크를 배포 간에 재사용한다(버전 스큐와 정적 자산 오프로드)
  • experimental.prefetchInlining(작은 prefetch 응답을 하나로 묶기)이 기본으로 켜졌다

App Router 자체로 옮기는 이야기는 Pages Router에서 App Router로, 이전 캐시 모델은 Next.js 캐시 계층.

출처: Next.js - Upgrading to Version 16 · Next.js 16.3 · Next.js - partialPrefetching · Next.js - next/root-params · Next.js - catchError · Next.js - turbopackFileSystemCache

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • NestJS

    NestJS는 TypeScript를 전제로 모듈·의존성 주입(Dependency Injection, DI)·데코레이터(decorator) 구조를 제공하는 Node.js 서버 프레임워크다. 2017년 Kamil Myśliwiec가 만들었고, 구조를 강제하는 방식 때문에 흔히 "Node.js의 Spring"이라 불린다.

  • loading 경계와 레이아웃 끌어올리기

    Next.js App Router에서 loading.tsx는 같은 세그먼트의 page와 그 아래(하위 layout 포함)를 suspense로 감싸지만, **같은 세그먼트의 layout은 감싸지 않는다**. 그래서 데이터를 기다릴 필요가 없는 공통 UI(탭바, 필터 헤더)를 page에서 layout으로 끌어올리면 스켈레톤에 덮이지 않고 처음부터 실제 모습으로 보인다.

  • Next.js output: 'standalone'

    output: 'standalone'은 next build가 프로덕션 실행에 필요한 파일만 골라 .next/standalone 폴더에 모아 주는 빌드 출력 모드다. 이 폴더는 node_modules를 다시 설치하지 않고 node server.js 하나로 실행된다.

  • generateMetadata

    generateMetadata()는 Next.js App Router에서 라우트 파라미터나 데이터에 따라 title, description, Open Graph(OG) 같은 메타데이터를 동적으로 만드는 서버 함수다. 값이 고정이면 export const metadata = { … }로 충분하다.

  • GraphQL

    GraphQL은 클라이언트가 필요한 데이터의 모양을 쿼리로 적어 보내면 서버가 정확히 그 모양으로 응답하는 API 쿼리 언어(query language)다. Facebook이 2012년 내부에서 만들어 2015년 공개했고, 지금은 GraphQL Foundation이 관리한다.

보기 옵션