[Next.js] Next.js 16 릴리즈(반드시 업데이트)

windowook·2025년 12월 13일
next.js
post-thumbnail

소식

2025년 10월 21일 Next.js 메이저 버전이 새롭게 출시되었습니다.
14에서 15로 변경되었을 때의 변경 사항보다 더 많은 내용을 가지고 있습니다.
해당 내용은 아래에서 원문으로 직접 확인하실 수 있습니다.

https://nextjs.org/blog/next-16

Cache Components

설명

16에서 컴포넌트 캐싱이 새롭게 등장했습니다.

이제 암묵적이 아니라 명시적으로 캐싱이 가능합니다.
예상치 못한 캐싱을 방지하고자, 기본적으로 동적으로 실행됩니다.
모든 동적 코드는 요청받으면 실행됩니다.

이 개념은 PPR(Partial Pre-Rendering)과 이어집니다.
캐시 컴포넌트는 PPR을 완성시킨 것과 같습니다.

16에서는 PPR의 플래그와 config를 삭제하고, cacheComponents를 등장시켰습니다.
PPR과 Streaming에 대해서 잘 모르신다면 공식 문서를 링크할테니 참고해주세요.

PPR
https://nextjs.org/docs/app/guides/upgrading/version-16#partial-pre-rendering-ppr
Streaming
https://nextjs.org/learn/dashboard-app/streaming

사용법

  • use cache 지시어 사용
  • next.config.ts - cacheComponents: true 사용
"use cache"

function CacheComponent() {
	return (
		<div>hi!</div>
	);
};

Next.js Devtools MCP

설명

16에서 AI 지원 디버깅을 위한 MCP를 제공하기 시작합니다.

라우팅/캐싱/렌더링 동작, 통합 로그, 스택 트레이스, 현재 라우트 등의 컨텍스트를 AI 에이전트에게 제공할 수 있습니다.

사용법

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

middleware → proxy

설명

middleware.ts가 proxy.ts로 이름이 변경되었습니다.
네트워크 경계를 더 명확히 하기 위함이라고 합니다.

middleware.ts는 원래 엣지 런타임에 실행되었습니다.
전 세계 CDN 엣지에서 실행됐죠.

  • Next.js 요청 처리 순서
    • 엣지 런타임
    • Node.js 런타임
    • 브라우저

proxy.ts는 이제 Node.js 런타임에서 실행됩니다.
기존의 요청 인터셉트 로직은 동일하게 유지합니다.

마이그레이션

  • 파일명 변경
    • middleware.ts → proxy.ts
  • 함수명 변경
    // 15
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}

// 16
export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

개발 모드 로깅 개선

설명

개발 모드 사용시 터미널에서 페이지 요청시 출력되던 로그에 세부화가 적용되었습니다.
어디서 시간이 많이 소요되는지 한눈에 파악할 수 있도록 확장되었다고 합니다.

  • Compile: 라우팅과 컴파일
  • Render: 코드 실행과 리액트 렌더링

그리고 빌드가 완료되면 기존 로그 상단에 다음 내용도 함께 출력됩니다.

▲ Next.js 16 (Turbopack)
 
 ✓ Compiled successfully in 615ms
 ✓ Finished TypeScript in 1114ms
 ✓ Collecting page data in 208ms
 ✓ Generating static pages in 239ms
 ✓ Finalizing page optimization in 5ms

개발자 경험을 위한 개선 사항

Turbopack 기본 번들러 채택

이제 개발 모드에서만 사용할 수 있지 않고 프로덕션에서도 기본 사용됩니다.

package.json에 turbopack config를 기입하지 않아도 됩니다.

  • “scripts”: { "dev": "next dev --turbopack" }

개선 후 효과는 아래와 같습니다.

  • 프로덕션 빌드 속도 웹팩 대비 2.6배 향상
  • Fast Refresh 속도 웹팩 대비 10배 향상
  • 대규모 프로젝트 초기 구동 5~10초 → 0.6~1초

Turbopack 파일 시스템 캐싱

개발 모드일 때 컴파일 아티팩트를 디스크에 저장해
애플리케이션 재시작 시 컴파일 시간을 대폭 단축시킬 수 있는 기능입니다.

활성화를 위해 아래와 같이 next.config.ts에 추가하면 됩니다.

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};
 
export default nextConfig;

create-next-app 단순화

이제 명령어를 입력해서 초기 프로젝트 세팅시 아래가 기본이 됩니다.

  • App Router 사용
  • TypeScript 우선
  • Tailwind CSS 및 ESLint 포함

Build Adapters API (알파 버전)

빌드 프로세스에 커스텀 어댑터를 연결할 수 있는 Build Adapters API가 알파 버전으로 제공됩니다.
Build Adapters를 사용해 빌드 프로세스에 연결되는 커스텀 어댑터를 생성할 수 있으며,
배포 플랫폼이나 커스텀 빌드 워크플로우가 Next.js 설정을 수정하거나 빌드 출력을 처리할 수 있습니다.

활성화를 위해 아래와 같이 next.config.ts에 추가하면 됩니다.

const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
};
 
module.exports = nextConfig;

리액트 컴파일러 지원

리액트 컴파일러는 컴포넌트를 자동으로 메모이제이션하여, 수동 코드 변경 없이 불필요한 재렌더링을 줄여주는 역할을 합니다.

활성화를 위해 아래와 같이 next.config.ts에 추가하면 됩니다.

const nextConfig = {
	reactCompiler: true,
};

export default nextConfig;

그리고 컴파일러가 바벨에 의존하므로, 리액트 컴파일러 플러그인을 설치해주세요.

npm install babel-plugin-react-compiler@latest

핵심 기능과 아키텍처

향상된 라우팅 및 네비게이션

레이아웃 중복 제거

동일 레이아웃을 공유하는 여러 링크를 프리페칭할 때 레이아웃이 한 번만 다운로드 됩니다.

증분 프리페칭

이미 캐시된 부분은 재요청하지 않고, 뷰포트를 떠나면 요청을 취소하거나 우선순위를 조정할 수 있게 세밀한 조정이 가능해졌습니다.

개선된 캐싱 API

revalidateTag() 업데이트

revalidateTag(tag, profile) 형태로 바뀌어, stale-while-revalidate(SWR) 동작을 지원합니다.

updateTag(tag) 추가

서버 액션 내에서 캐시를 바로 만료하고 최신 데이터를 즉시 반영할 수 있습니다.

refresh() 추가

서버 액션을 수행한 후, 페이지의 다른 위치에 표시된 캐시되지 않은 데이터를 새로고침해야 할 때 사용합니다.

캐시된 내용에는 영향을 주지 않으면서 동적 데이터만 갱신 가능합니다.
이 API는 클라이언트 사이드의 router.refresh()를 보완하는 역할로 만들어졌습니다.

React 19.2 및 Canary 기능 지원

  • View Transitions
    • startTransition API
    • 네비게이션 또는 업데이트 시 UI 애니메이션 지원
  • useEffectEvent()
    • Effects 내부의 비-리액티브 로직을 추출해 재사용 가능
  • <Activity></Activity>
    • UI를 숨기고 상태를 유지하며 백그라운드 작업을 렌더링할 수 있는 컴포넌트

동기 API 비동기화

반드시 해당 API의 최상위 요소에서 async를 사용해야 합니다.

삭제대체
Sync params, searchParams props accessawait params, await searchParams
Sync cookies(), headers(), draftMode() accessawait cookies(), await headers(), await draftMode()
Metadata 이미지 경로의 params argumentparams  id from generateImageMetadata → Promise<string>

Next.js 16 요구사항

버전세부 사항
Node.js 20.9+최소 지원 버전은 20.9.0 (LTS); Node.js 18은 더 이상 지원하지 않음
TypeScript 5+최소 지원 버전은 5.1.0
브라우저Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+

마무리

😂 TL; DR

  • Cache Components 등장
    • PPR의 완성
  • Next.js Devtools MCP 등장
  • middleware가 proxy로
  • Turbopack이 기본 번들러로
    • 파일 시스템 캐싱을 통한 빌드 타임 개선까지
  • 리액트 컴파일러 지원
  • 라우팅 중복 제거와 캐싱 옵션 증가, 성능 향상

본인 의견

Next.js 16은 15 버전에서 실험적으로 도입되었던 기능들을 안정화하고, 프로덕션 환경에서의 성능을 대폭 개선한 메이저 버전입니다.

가장 주목할 만한 변화는 Turbopack의 정식 출시입니다.
개발 환경뿐만 아니라 프로덕션 빌드에서도 기본 번들러로 채택되면서, 2-5배 빠른 빌드 성능을 기대할 수 있게 되었습니다.

또한 캐싱 전략의 근본적인 변화도 눈여겨볼 필요가 있습니다.
기존의 암묵적 캐싱 방식에서 벗어나 cacheComponents 옵션과 "use cache" 지시문을 통한 명시적 캐싱 모델로 전환되었으며, updateTag(), refresh() 등 세밀한 캐시 무효화 API가 추가되었습니다. 이는 Next.js가 지향하는 서버 중심 렌더링 아키텍처를 더욱 정교하게 제어할 수 있는 기반을 마련했다고 볼 수 있습니다.

개인적으로는 이번 업데이트를 계기로 서버 컴포넌트 중심의 새로운 프로젝트를 구상 중입니다. React 19.2 Canary와 Next.js 16의 조합으로 최신 기능들을 실전에서 활용해보고, 그 과정에서 얻은 인사이트를 공유하고자 합니다.

기존 Next.js 15 이하 버전을 사용 중이시라면, 공식 마이그레이션 도구(npx @next/codemod@canary upgrade latest)를 통해 비교적 손쉽게 업그레이드할 수 있으니 한번 시도해보시는 것을 권장드립니다.

이번에 React2Shell 이슈도 있었으니 이참에 최신 버전으로의 마이그레이션을 진행하는 것도 좋겠네요. 그럼 다음 포스트에서 또 뵙겠습니다:)

# 자동 업그레이드
npx @next/codemod@canary upgrade latest
 
# 수동 업그레이드
npm install next@latest react@latest react-dom@latest
 
# 새 프로젝트 생성
npx create-next-app@latest
profile
windowook
안녕하세요
이전 포스트

[claude code] Claude Code로 하는 컨텍스트 엔지니어링

다음 포스트

[회고록] 2025년 회고록

0개의 댓글