Next.js 16 vs 15 변경점: 무엇이 달라졌나?

2025년 10월 21일에 Next.js 16이 공개되었다.
이미 15를 쓰고 있는 팀이라면 “무엇이 좋아졌는가?”보다 먼저
“어떤 부분이 바뀌었고 왜 바뀌었는가?”를 확인하는 게 중요하다.

한눈에 보는 Next.js 16 vs 15

16에서 먼저 확인할 변경점

1) Async Request APIs 최종 정리

15에서 경고로 넘어가던 동기 접근은 16에서 더 엄격해졌다.
다음 패턴을 우선 점검한다.

// before
export default function Page({ params }) {
  const slug = params.slug;
  return <div>{slug}</div>;
}

// after
export default async function Page({ params }) {
  const { slug } = await params;
  return <div>{slug}</div>;
}

같은 맥락으로 cookies(), headers(), draftMode()도 await 패턴을 기준으로 마이그레이션한다.

2) middleware.ts -> proxy.ts

16에서는 proxy.ts가 표준 경로다.
기존 로직은 대부분 유지하고, 파일명/함수명만 전환하면 된다.

// proxy.ts
import { NextRequest, NextResponse } from 'next/server';

export default function proxy(request: NextRequest) {
  return NextResponse.next();
}

3) revalidateTag() 시그니처 변경

단일 인자 호출은 deprecated 흐름이다.

import { revalidateTag, updateTag } from 'next/cache';

// SWR 성격의 재검증
revalidateTag('posts', 'max');

// Server Action에서 read-your-writes 보장
updateTag('user-profile');

4) Parallel Routes의 default.js 요구

병렬 슬롯은 default.js가 없으면 빌드 실패 가능성이 있다.
기존에 암묵 동작하던 슬롯 구조를 명시적으로 보강해야 한다.

5) 이미지/보안 기본값 변화

next/image 관련 기본 정책(캐시 TTL, quality, redirect 제한, local src 보안 제한 등)이 조정됐다.
이미지 최적화 커스텀을 많이 한 프로젝트는 회귀 테스트가 필요하다.

16에서 체감되는 “좋아진 점”

Cache Components ("use cache")

15까지는 App Router에서 캐싱 동작을 규칙/예외로 이해해야 하는 구간이 많았고,
16은 캐시할 대상을 코드에서 직접 선언하는 방식으로 정리했다.

• 기본 동작: 페이지/레이아웃/라우트의 동적 코드는 요청 시점에 실행
• 선택 동작: "use cache"를 선언한 페이지/컴포넌트/함수만 캐시
• 캐시 키: 컴파일러가 사용 위치 기준으로 키 생성을 보조

또한 Cache Components는 PPR(Partial Prerendering) 흐름을 공식 모델로 통합한다.
즉, URL 전체를 정적/동적으로 이분법 처리하는 대신,
정적 껍질 + 필요한 부분만 동적으로 렌더링하는 구성이 자연스러워진다.

설정은 next.config.ts에서 활성화한다.

const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

기존에 쓰던 experimental.ppr 계열 설정은 제거되었고,
Cache Components 설정으로 일원화되었다.

Turbopack 기본화

next dev, next build에서 Turbopack이 기본이 되며
프로젝트에 따라 빌드/리프레시 체감 개선이 크다.
단, 커스텀 webpack 의존이 강하면 --webpack 경로를 함께 유지해 단계적으로 전환하는 것이 안전하다.

라우팅/프리패치 개선

레이아웃 중복 다운로드를 줄이고 incremental prefetch를 적용해
요청 수는 늘어도 총 전송량을 낮추는 방향으로 최적화가 들어갔다.

Next.js Devtools MCP

Next.js 16은 Next.js Devtools MCP를 소개했다.
MCP(Model Context Protocol)를 통해 AI 코딩 에이전트가 실행 중인 앱 상태와 로그에 더 직접적으로 접근할 수 있다.

공식 가이드 기준 최소 설정 예시는 다음과 같다.

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

이후 pnpm dev / npm run dev처럼 개발 서버를 실행하면 MCP 서버가 앱을 감지해 연결된다.

Logging Improvements

Next.js 16에서는 로그가 “시간이 어디에 쓰였는지”를 더 잘 보여준다.

• 개발 요청 로그: Compile(라우팅/컴파일)과 Render(코드 실행/React 렌더링) 구분
• 빌드 로그: TypeScript, 페이지 데이터 수집, 정적 페이지 생성, 최적화 단계별 소요 시간 표시

이 변경으로 dev/build 단계에서 병목 위치를 빠르게 파악하기 쉬워졌다.

참고 자료

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

2026-03-18 18:10