Next.js 15~15.5 릴리스 총정리

Next.js는 문서와 블로그를 통해 변화가 빠르게 공유되는 프레임워크입니다. 실험 기능이 안정화되기까지의 과정이 비교적 투명하고, 커뮤니티 피드백도 제품에 잘 반영되죠. 저도 14.2에서 15로 올라갈 때 @next/codemod를 활용해 무리 없이 마이그레이션했고, 그 이후 15.x 라인의 업데이트를 계속 지켜봐 왔습니다.

이 글은 Next.js 15 ~ 15.5에서 나왔던 변화를 한 번에 정리합니다. 지금은 16 베타가 보이는 시점이지만, 15.5로 업그레이드하기 전에 알아둘 변경 사항과 ‘실무에서 어떻게 적용할지’를 빠르게 감 잡을 수 있도록 핵심 포인트를 뽑았습니다. 자세한 맥락이 궁금하다면 각 릴리스의 원문 블로그도 함께 읽어보길 권합니다.

---

버전 15로 업그레이드하는 방법

제공되는 @next/codemod CLI로 손쉽게 버전 15로 마이그레이션할 수 있습니다. 업그레이드 절차와 버전14 → 버전15의 핵심 변화는 공식 가이드에서 확인하세요:

다만, 세부 업데이트 내용까지 모두 담겨 있지는 않으니 아래 요약본이나 각 릴리스 블로그도 함께 읽어보시길 다시 한번 추천드립니다.

또한, 실제 적용 과정을 담은 마이그레이션 실전 가이드는 별도 글로 곧 공유하겠습니다.

---

Next.js 15 RC — 정리 (2024-05-23)

TL;DR

• React 19 RC 지원, React Compiler(실험), Hydration 에러 뷰 개선.

• 캐싱 기본값 변경: fetch / GET Route Handler / Client Router Cache가 기본 미캐시로 전환.

• PPR(부분 사전 렌더링) 점진 도입: experimental_ppr로 라우트 단위 Opt-in.

• next/after(실험): 응답 스트리밍 후 작업 예약 API.

• create-next-app: 새 UI + Turbopack 프롬프트(--turbo), 최소 템플릿(--empty).

• 외부 패키지 번들링(안정화): bundlePagesRouterDependencies + serverExternalPackages.

핵심 변경 요약

1) React 19 RC & React Compiler(실험)

• React 19 RC 정식 지원(클라이언트/서버 Actions 포함). 일부 서드파티는 아직 호환 안 될 수 있음.

• React Compiler 지원(현재는 Babel 플러그인 경유 → 빌드 느려질 수 있음). annotation 옵트인 모드 제공.

// next.config.ts
export default {
  experimental: {
    reactCompiler: true, // or { compilationMode: 'annotation' }
  },
};

**2) Hydration 에러 UX 개선 **

• 14.1의 개선을 이어서, 오류 소스 코드 + 해결 가이드를 보여주는 신규 에러 뷰. 디버깅 UX 강화.

3) 캐싱 기본값 ‘미캐시’로 변경

fetch

• 기존 기본값 force-cache → no-store로 변경.

• 필요 시 아래 중 하나로 명시 opt-in:

  • fetch(..., { cache: 'force-cache' })

  • 라우트 설정 export const dynamic = 'force-static'

  • 라우트 설정 export const fetchCache = 'default-cache'(Layout/Page 내 명시 없는 fetch에 일괄 적용)

GET Route Handlers

• 기본 미캐시. 정적으로 두고 싶으면 export const dynamic = 'force-static'.

• sitemap.ts, opengraph-image.tsx, icon.tsx 등 메타 경로는 기본 정적(동적 기능 사용 시 제외).

Client Router Cache

• Page 세그먼트의 기본 staleTime: 0(탐색 시 항상 최신 Page 데이터).

• 변하지 않는 점:

  • 공유 레이아웃 데이터는 재페치 안 함(부분 렌더링 지원).

  • 뒤/앞 탐색은 캐시 복원(스크롤 복원 보장).

  • loading.js는 5분 캐시(또는 staleTimes.static).

• 이전 동작을 원하면:

export default {
  experimental: { staleTimes: { dynamic: 30 } },
};

4) PPR(Partial Prerendering) 점진 도입

• 라우트 단위로 Opt-in: 해당 레이아웃/페이지에 export const experimental_ppr = true.

• next.config.ts에서 experimental.ppr = 'incremental' 설정 → 모든 세그먼트가 준비되면 ppr: true로 승격 가능.

5) next/after(응답 후 작업 예약, 실험)

• 서버리스 환경에서 응답 종료 후 실행되어야 하는 로깅/분석/동기화 작업을 스트리밍 완료 뒤 예약 실행.

• experimental.after: true 설정 후 unstable_after 사용(서버 컴포넌트/액션/라우트 핸들러/미들웨어).

6) create-next-app 업그레이드

• Turbopack 사용 여부 프롬프트, --turbo 및 최소 템플릿 --empty 추가.

7) 외부 패키지 번들링(안정)

• Pages/ App Router 설정 통일:

  • bundlePagesRouterDependencies: true(Pages Router도 자동 번들링)

  • serverExternalPackages: ['pkg']로 특정 패키지 번들 제외.

export default {
  bundlePagesRouterDependencies: true,
  serverExternalPackages: ['package-name'],
};

8) 기타 주요 변경(발췌)

[Breaking] 최소 React 버전 19 RC. [Breaking] next/image: squoosh 제거 → sharp(옵셔널) 사용. [Breaking] next/image: 기본 Content-Disposition을 attachment로. [Breaking] next/image: src 앞뒤 공백 시 에러. [Breaking] 미들웨어: react-server 조건 적용(권장되지 않는 React API import 제한). [Breaking] next/font: 외부 @next/font 패키지 지원 제거. [Breaking] next/font: font-family 해싱 제거. [Breaking] 캐싱: force-dynamic 사용 시 fetch 캐시 기본값을 no-store로. [Breaking] 설정: swcMinify, missingSuspenseWithCSRBailout, outputFileTracing 기본 활성 + 구 옵션 제거. [Breaking] Speed Insights 자동 계측 제거 → @vercel/speed-insights 패키지 사용. [Breaking] 동적 sitemap의 .xml 확장 제거, 개발/프로덕션 URL 정렬. [Improvement] Vercel 호스팅 시 metadataBase의 env fallback 업데이트. [Improvement] optimizePackageImports의 혼합 네임스페이스/명명 import 트리셰이킹 보정. [Improvement] 병렬 라우트: unmatched catch-all에 모든 known params 제공. [Improvement] bundlePagesExternals → bundlePagesRouterDependencies로 이름 변경 + 안정화. [Improvement] serverComponentsExternalPackages → serverExternalPackages로 이름 변경 + 안정화. [Improvement] create-next-app: 신규 프로젝트는 기본적으로 모든 .env 무시. [Docs] Auth 문서 개선, @next/env 문서화.

---

Next.js 15 RC 2 — 정리 (2024-10-15)

TL;DR

• 업그레이드 자동화 CLI: npx @next/codemod@canary upgrade rc로 의존성/코드모드 한 번에.

• Turbopack(개발): 메모리 25–35%↓, 대형 페이지 초기 컴파일 30–50%↑. Opt-in 유지. next dev --turbo.

• Async Request APIs(브레이킹): cookies/headers/draftMode/params/searchParams 비동기화(임시 동기 접근은 경고). 코드모드 제공.

• Server Actions 보안: 미사용 액션 제거(Dead code elim), 난수형 ID. 여전히 “공개 엔드포인트”로 간주해야 함.

• Static Route Indicator: 개발 중 정적/동적 라우트 시각화(비활성화 가능).

• <Form> 컴포넌트: 프리페치, 클라 네비게이션, 무JS 폴백.

• next.config.ts 지원: 타입 세이프한 NextConfig 제공.

• instrumentation.js 안정화 + onRequestError 훅 추가.

• 개발/빌드 개선: RSC HMR fetch 재사용, 정적 생성 1패스화(+공유 fetch 캐시), 고급 정적 생성 제어(실험).

• 셀프호스팅 개선: ISR stale-while-revalidate 제어(expireTime), 커스텀 Cache-Control 보존, sharp 자동 사용.

• ESLint 9 지원: Flat config 미도입 시 자동 escape hatch. 일부 플래그 제거 예고.

핵심 변경 요약

1) Codemod 업그레이드 CLI

• npx @next/codemod@canary upgrade rc로 프리릴리스/안정 버전 업그레이드, 의존성 업데이트 + 적용 가능한 코드모드 안내/적용까지 한 번에.

2. Turbopack for dev (Opt-in)

• 베타~RC 기간 54건 이슈 해결, 내부 서비스(vercel.com, v0.app, nextjs.org)로 보완.

• 최근 3개월 지표: 메모리 25–35% 감소, 대형 페이지 초기 컴파일 30–50% 단축. next dev --turbo.

• 앞으로 persistent caching, 메모리 최적화, next build 지원(테스트 96% 통과 진행) 로드맵.

3) Async Request APIs (Breaking)

요청 의존 API를 비동기로 전환:

• 대상: cookies, headers, draftMode, params(layout/page/route/default/generateMetadata/generateViewport), searchParams(page).

• 임시로 동기 접근 가능하나 경고 출력(차기 메이저에서 제거 예정).

• 자동 변환: npx @next/codemod@canary next-async-request-api .

import { cookies } from 'next/headers';

export async function AdminPanel() {
  const store = await cookies();
  const token = store.get('token');
}

4) Server Actions 보안 강화

• Dead code elimination: 미사용 액션은 번들/엔드포인트 생성 X.

• Secure action IDs: 클라이언트가 참조할 추측 불가·비결정적 ID를 빌드마다 재계산.

주의: 액션은 여전히 공개 HTTP 엔드포인트로 취급해야 함.

5) Static Route Indicator

• 개발 중 해당 라우트가 정적/동적인지 UI로 표시(빌드 출력에서도 렌더링 전략 확인 가능).

• devIndicators로 위치 변경/비활성화 가능.

6) <Form> 컴포넌트

• 프리페치(레이아웃/로딩 UI), 클라이언트 네비(상태 보존), 점진적 향상(JS 미로딩 시 풀페이지 이동).

• 검색 등 페이지 전환형 폼에 적합.

7) next.config.ts (TypeScript)

• import type { NextConfig } from 'next'로 자동완성/타입 세이프 옵션.

**8) instrumentation.js (Stable) ** + onRequestError

• 서버 라이프사이클 관찰용 파일(예: OpenTelemetry/Sentry 연동).

• experimental.instrumentationHook 제거 가능(안정화됨).

• onRequestError(err, request, context) 훅으로 라우터/컨텍스트 정보 포함 에러 수집 가능.

9) 개발·빌드 개선

• RSC HMR: 이전 렌더의 fetch 응답 재사용(로컬 개발 속도↑/유료 API 비용↓).

• 정적 생성 최적화: 기존 2패스 → 1패스 재활용, 워커 간 fetch 캐시 공유.

• 고급 정적 생성 제어(실험): staticGenerationRetryCount / MaxConcurrency / MinPagesPerWorker. (특수 케이스에만 권장)

10) Self-hosting 개선

• ISR의 stale-while-revalidate 제어: experimental.swrDelta → expireTime로 정식화(기본 1년).

• 사용자 지정 Cache-Control 존중(프레임워크 기본값이 덮어쓰지 않음).

• 이미지 최적화: next start/standalone에서 sharp 자동 사용(수동 설치 불필요).

11) ESLint 9 지원

• ESLint 8/9 병행 호환. 9로 올렸는데 Flat config 미사용 시 ESLINT_USE_FLAT_CONFIG=false 자동 지정(마이그레이션 유예).

• next lint에서 --ext, --ignore-path 등 구 옵션 제거 예정(ESLint 10에서 완전 제거 방향).

• eslint-plugin-react-hooks@5.0.0로 갱신(새 규칙 포함).

12) 기타 변경(발췌)

RC1의 모든 변경 포함. [Breaking] runtime = "experimental-edge" 지원 중단 → "edge"로 전환(코드모드 제공). [Breaking] 렌더 중 revalidateTag/Path 호출 시 에러. [Breaking] instrumentation.js/middleware.js가 vendored React 패키지 사용. [Breaking] 최소 Node.js 18.18.0. [Breaking] next/dynamic의 suspense prop 제거(App Router에서 빈 Suspense 삽입 안 함). [Breaking] Edge Runtime 모듈 해석 시 worker module condition 미적용. [Breaking] Server Components에서 next/dynamic({ ssr:false }) 금지. [Improve] outputFileTracing* 3종 안정화, 글로벌 CSS/모듈 CSS 병합 회피, NEXT_CACHE_HANDLER_PATH로 캐시 핸들러 지정. [Improve] Pages Router가 React 18/19 동시 지원. [Improve] Error Overlay에 Node Inspector URL 복사 버튼. [Improve] App Router 프리페치에 priority 적용, unstable_after 정적 페이지 사용 허용, SSR 시 next/dynamic 청크 프리페치. [Improve] App Router에서 esmExternals 지원, allowDevelopmentBuild(개발 빌드 강제 허용), Pages Router에서 Server Action 변환 비활성화, 빌드 워커 종료 시 행잉 방지, Server Action 리다이렉트 시 revalidate 적용, Edge 병렬 라우트 동적 파라미터 처리, 정적 페이지 최초 로드 후 staleTime 준수, vercel/og 메모리 릭 수정, msw 사용 위한 패치 타이밍 조정.

---

Next.js 15 — 정리 (2024-10-21, Mon)

대부분 RC ,RC2 내용을 포함한 안정화버전

TL;DR

• 안정화 릴리스 + RC1/RC2 내용 포함. 업그레이드: npx @next/codemod@canary upgrade latest 또는 npm i next@latest react@rc react-dom@rc.

• Async Request APIs(브레이킹): cookies/headers/draftMode/params/searchParams 비동기 전환(임시 동기 접근은 경고).

• 캐싱 의미론 변경(브레이킹): fetch/GET/클라이언트 탐색이 기본 미캐시.

• React 19 정렬: App Router는 React 19 RC, Pages Router는 React 18 유지 가능. React Compiler(실험) 지원.

• Turbopack Dev(안정): next dev --turbo — vercel.com에서 서버 스타트업 최대 76.7%↑, Fast Refresh 최대 96.3%↑, 초기 라우트 컴파일 최대 45.8%↑.

• Static Route Indicator, unstable_after(실험), instrumentation.js(안정), <Form>, next.config.ts 타입 지원, Self-hosting 개선, Server Actions 보안 강화, 외부 패키지 번들링 옵션(안정), ESLint 9 지원 포함.

핵심 변경 요약

1) 업그레이드 가이드

• 자동화 CLI:

npx @next/codemod@canary upgrade latest
# 또는
npm i next@latest react@rc react-dom@rc

(canary 태그의 코데모드는 최신 개선 반영)

2) Async Request APIs (Breaking)

• 다음 API가 async로 변경: cookies, headers, draftMode, params(layout/page/route/default/generateMetadata/generateViewport), searchParams(page).

• 임시 동기 접근 가능하나 dev/prod에서 경고. 자동 마이그레이션: npx @next/codemod@canary next-async-request-api .

3) 캐싱 의미론

• 기본값이 미캐시로 전환됨: 항목은 fetch 요청, GET Route Handler, Client Router Cache. (이전 동작 유지하려면 옵션으로 opt-in)

• GET: 기본 미캐시. 정적으로 두려면 export const dynamic = 'force-static'. sitemap.ts, opengraph-image.tsx, icon.tsx 등 메타 경로는 기본 정적.

• Client Router Cache: Page 세그먼트 staleTime: 0. 레이아웃 데이터는 재페치 안 함, 뒤/앞 탐색은 캐시 복원, loading.js는 5분 캐시. 이전 동작 복원:

export default { experimental: { staleTimes: { dynamic: 30 } } }
``` :contentReference[oaicite:11]{index=11}

4) React 19, Pages Router 호환, React Compiler(실험)

• App Router는 React 19 RC, Pages Router는 React 18/19 병행 가능(혼용 권장 X).

• React Compiler 지원(현재 Babel 플러그인만 → dev/build 느려질 수 있음).

5) Hydration 에러 뷰 개선

• 에러 소스 코드 + 해결 제안까지 표시하는 개선된 UI.

6) Turbopack Dev (Stable)

• 실서비스에서 검증된 성능: 서버 스타트업 최대 76.7%, Fast Refresh 최대 96.3%, 초기 라우트 컴파일 최대 45.8% 개선.

7) Static Route Indicator

• 개발 중 라우트 정적/동적 렌더링 전략 시각화(빌드 출력에서도 확인 가능).

8) unstable_after (Experimental)

• 응답 스트리밍 종료 후 실행할 보조 작업 예약:

export default { experimental: { after: true } } // next.config.ts

서버 컴포넌트/액션/라우트/미들웨어에서 사용.

9) instrumentation.js (Stable)

• register() 기반 서버 라이프사이클 관찰. experimental.instrumentationHook 제거 가능.

• onRequestError(err, request, context) 훅으로 라우터·컨텍스트 포함 에러 수집.

10) <Form> 컴포넌트

• 프리페치, 클라이언트 네비게이션, 프로그레시브 향상 제공(검색 등 페이지 전환형 폼에 적합).

11) next.config.ts 타입 지원

• import type { NextConfig } from 'next'로 자동완성/타입 세이프 옵션 사용. Next.js

12) Self-hosting 개선

• ISR의 stale-while-revalidate 제어: experimental.swrDelta → expireTime 정식화(기본 1년).

• 커스텀 Cache-Control 유지(프레임워크 기본값이 덮어쓰지 않음).

• next start/standalone에서 sharp 자동 사용.

13) Server Actions 보안 강화

• Dead code elimination(미사용 액션 제거), 난수형·비결정적 ID(빌드 간 재계산).

• 여전히 공개 HTTP 엔드포인트로 취급해야 함.

14) 외부 패키지 번들링(Stable)

• Pages/App Router 설정 통합: bundlePagesRouterDependencies + serverExternalPackages 조합. Next.js

15) ESLint 9 지원

• ESLint 8/9 병행 호환, Flat config 미사용 시 ESLINT_USE_FLAT_CONFIG=false 자동 적용. 일부 구 옵션은 next lint에서 제거 예정.

16) 개발·빌드 성능

• RSC HMR가 이전 렌더의 fetch 응답 재사용.

• 정적 생성: 2패스 → 1패스 재활용, 워커 간 fetch 캐시 공유.

• 고급 정적 생성 제어(실험): staticGenerationRetryCount/MaxConcurrency/MinPagesPerWorker.

17) 기타 변경 발췌

[Breaking] next/image: squoosh 제거 → sharp(옵션), 기본 Content-Disposition: attachment, src 공백 시 에러. [Breaking] 미들웨어: react-server 조건 적용. [Breaking] next/font: 외부 @next/font 제거, font-family 해싱 제거. [Breaking] force-dynamic 사용 시 fetch 캐시 기본 no-store. [Breaking] Speed Insights 자동 계측 제거(→ @vercel/speed-insights). [Breaking] 동적 sitemap의 .xml 확장 제거. [Breaking] runtime: "experimental-edge" 폐지 → "edge"로 전환(코드모드 제공). [Breaking] 렌더 중 revalidateTag/Path 호출 시 에러. [Breaking] 최소 Node.js 18.18.0. [Breaking] next/dynamic의 suspense prop 제거, Server Components에서 ssr:false 금지. [Improve] metadataBase env 폴백, optimizePackageImports 트리셰이킹 보정, 병렬 라우트 catch-all 파라미터, outputFileTracing* 안정화 등.

---

Next.js 15.1 — 정리 (2024-12-10)

핵심 변경 요약

**1) React 19 (Stable) **

• Pages Router: React 19 안정판을 공식 지원(React 18도 계속 지원).

• App Router: 계속 React Canary를 번들로 제공(React 19 안정 변경 + 프레임워크 선검증 기능 포함).

• Next.js 15 이후 React 19에 **“sibling pre-warming”**이 추가됨.

2) 에러 디버깅 개선

• 소스맵 강화: ignoreList 를 활용해 외부 의존 스택 프레임을 기본 숨김 → 앱 코드에 포커스. 라이브러리 저자에게도 ignoreList 채택 권장.

• 스택 프레임 접기: 브라우저/오버레이/터미널 모두에서 제3자 프레임 기본 접기(“Show ignored frames”로 열람 가능).

• 프로파일링 개선: 브라우저 프로파일러가 무시 프레임을 인지 → 병목 지점 파악 용이.

• Edge Runtime: 개발 환경 전반에서 에러 스택 표시를 일관화(예전엔 메시지만 보이던 문제 개선).

3) after() — 안정화

응답 스트리밍이 끝난 뒤 로깅·분석·외부 동기화 같은 2차 작업을 실행. 15.1에서 안정화되며 다음이 반영됨:

• 셀프호스팅 환경 지원 개선.

• 다른 Next.js 기능과 맞물릴 때의 버그 수정.

• 타 플랫폼이 자체 waitUntil() 계열 프리미티브를 주입해 확장 가능.

• Server Actions/Route Handlers에서 cookies()/headers() 같은 런타임 API 사용 개선.

// app/layout.tsx
import { after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  after(() => { log(); }); // 응답 후 비차단 작업
  return <>{children}</>;
}

4) 권한 에러 처리(실험): forbidden() / unauthorized()

• 개요: App Router의 notFound()(404)처럼,

  • forbidden() → 403 + app/forbidden.tsx로 UI 커스터마이즈,

  • unauthorized() → 401 + app/unauthorized.tsx로 커스터마이즈.

• 활성화: next.config.ts에 실험 플래그 추가:

import type { NextConfig } from 'next';
const nextConfig: NextConfig = { experimental: { authInterrupts: true } };
export default nextConfig;

• 사용처: Server Actions/Server Components/Client Components/Route Handlers 어디서든 호출 가능.

• 참고: 루트 레이아웃 등 제약 사항은 함수 문서 참고. 본 기능은 실험 단계(프로덕션 권장 X). 15.2에서 안정화 목표로 추가 개선 예정.

예시:

import { verifySession } from '@/app/lib/dal';
import { forbidden } from 'next/navigation';

export default async function AdminPage() {
  const session = await verifySession();
  if (session.role !== 'admin') forbidden(); // 403
  return <h1>Admin Page</h1>;
}

5) 기타 변경(발췌)

• create-next-app가 ESLint 9 사용.
• 캐시 태그 최대치 128로 증가.
• 실험적 CssChunkingPlugin 비활성화 옵션 추가.
• 실험적 CSS 인라이닝 지원 추가.
• Sass 경고 소거, rewrites 사용 시 미처리 rejection 수정, Webpack 워커 실패 시 부모 프로세스 종료 보장, catch-all 라우트 인터셉션/요청 중복 제거/다중 루트 레이아웃 간 - Server Action 리다이렉트/MDX 플러그인 문자열 지정 등 다수 개선.

---

Next.js 15.2 — 정리 (2025-02-26)

TL;DR

• 에러 디버깅 UI 전면 개편 + 스택트레이스 품질 개선(React owner stacks 활용). 새 Dev Indicator로 렌더링 모드/빌드 상태/에러를 한곳에서.

• Streaming metadata: generateMetadata의 비동기 작업이 초기 UI 렌더를 막지 않음(봇 대상은 계속 지연 처리, htmlLimitedBots로 제어 가능).

• Turbopack 성능 향상: 라우트 접근 컴파일 최대 57.6% 빨라지고, vercel.com 기준 메모리 30% 감소. “대부분 케이스에서 Webpack보다 빠름” 목표.

• React View Transitions (실험) 플래그 추가.

• Node.js Middleware (실험): runtime: 'nodejs' 사용 가능(현재는 canary에서만 허용, 프로덕션 비권장).

핵심 변경 요약

1) 에러 디버깅 UX 대개편

• Error Overlay

  • 메시지/관련 코드 프레임/콜스택을 덜 산만하게 보여주는 새 디자인.

  • React owner stacks 도입으로 “문제의 하위 컴포넌트”를 정밀 지목.

  • 오버레이 하단에 피드백 섹션 추가(도움 됐는지 평가).

• Dev Indicator(개발 인디케이터)

  • 한 곳에서 렌더링 모드(Static/Dynamic), Turbopack 컴파일 상태, 활성 에러 확인.

  • 라우트 이동 중 흐릿한 Next 로고 → 컴파일 완료 시 밝아짐(상태 힌트).

  • 앞으로 PPR 디버깅, 캐시 모니터링 등 확장 예정.

2) Streaming metadata

• 이제 generateMetadata가 끝나기 전이라도 초기 UI를 먼저 전송 → 초기 페인트가 데이터 요구에 덜 영향받음.

• 다만 봇/크롤러는 <head> 메타데이터를 기대하므로 해당 UA에는 여전히 지연 전송(정규식은 htmlLimitedBots로 커스터마이즈 가능).

3) Turbopack 성능 향상

• 초기 라우트 접근 컴파일이 조기 채택 사례에서 최대 57.6% 빨라짐, 로컬 개발 메모리 ~30% 감소(vercel.com 관찰치).

• 지속 캐싱/프로덕션 빌드는 내부 도그푸딩 중(지표 추후 공유 예정).

4) React View Transitions (Experimental)

• 실험 플래그로 뷰 전환 애니메이션을 활성화:

// next.config.js
module.exports = {
  experimental: { viewTransition: true },
}

• 매우 실험적이며 추후 변경 가능. 사용법은 React 측 PR/문서도 참고.

5) Node.js Middleware (Experimental)

• 미들웨어에서 Node.js 런타임 사용 허용(예: bcrypt 등 Node 전용 라이브러리):

// next.config.js
module.exports = { experimental: { nodeMiddleware: true } }

// middleware.js
export const config = { runtime: 'nodejs' }

• 안정판에선 오류를 던지고 next@canary에서만 동작하도록 제한(아직 프로덕션 권장 X).

• 차후 API 재설계/개선 계획 중, 피드백 요청.

6) Coming soon

• **“use cache” (베타)**를 독립 기능으로 안정화 준비 중.

• Turbopack persistent caching (실험) 도그푸딩 진행 중, 안정화 후 플래그 공개 예정.

7) 기타 변경(발췌)

• 새 플래그: create-next-app --api(헤드리스 API 전용 템플릿).
• next/image: images.qualities 지원.
• App Router i18n 구성 디프리케이션 경고.
• 린트 성능 개선(no-html-link-for-pages), "use action" 지시문 오사용 시 빌드 에러, dev 서버 HTTP 로그 비활성화 옵션, pagination SEO link 추가, 메타데이터/<Link> JSDoc 개선, 미들웨어가 next/image 요청 매칭, 기본 에러 메시지에 호스트명 추가, 명시적 에러 경계에서 처리하지 않은 에러는 reportError로 전달 등.

---

Next.js 15.3 — 정리 (2025-04-09)

TL;DR

• next build --turbopack 알파 공개: 통합 테스트 99%+ 통과(8000+ 테스트). 다코어일수록 빌드 성능 더 잘 스케일. 프로덕션 미션크리티컬에는 아직 권장 X.

• Rspack 커뮤니티 플러그인(실험): Webpack API 호환을 중시하는 팀을 위한 next-rspack 어댑터(~96% 테스트 통과).

• Client Instrumentation 훅: 프런트 코드 실행 이전에 모니터링/분석 초기화.

• Navigation Hooks: <Link onNavigate>(취소 가능) & useLinkStatus()(로컬 로딩 상태).

• TS 플러그인 성능: 대규모 코드베이스에서 응답 시간 ~60% 개선.

핵심 변경 요약

1) Turbopack 빌드(알파)

• next build --turbopack 도입. 기능 호환성 99.3%(8000+ 테스트), dev에서 이미 Turbopack이 잘 동작한다면 build도 “as-is”로 동작할 가능성 큼. 다만 알파이므로 프로덕션 핵심 서비스엔 미권장(스테이징/프리뷰로 시험 권장).

• 대형 모노레포·파트너 코드베이스 검증: 4코어 +28% / 16코어 +60% / 30코어 +83% 더 빠름. 퍼시스턴트 캐싱 실험 중(추후 공유).

next build --turbopack

• 설정 키 변경(정식화): experimental.turbo → 상위 turbopack 키로 승격(다음 메이저 전까지 하위 호환 유지).

// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': { loaders: ['@svgr/webpack'], as: '*.js' },
    },
  },
};
export default nextConfig;

2) Rspack 커뮤니티 지원(실험)

• next-rspack 플러그인으로 Rspack을 번들러로 사용 가능(공식 플러그인은 아니지만 Next.js 팀과 파트너십). Webpack API에 거의 동일한 호환을 중시하는 팀에 옵션 제공. 현재 ~96% 통합 테스트 통과.

3) Client Instrumentation 훅

• instrumentation-client.(js|ts) 파일을 프로젝트 루트에 추가해 프런트 코드 실행 전 성능 마킹/에러 수집/분석 SDK 초기화 등 수행. 서버 측 instrumentation과 대칭 개념.

// instrumentation-client.js
performance.mark('app-init');
window.addEventListener('error', (e) => reportError(e.error));

4) Navigation Hooks

• onNavigate(Link prop): SPA 네비게이션 시에만 실행되며 preventDefault()로 취소 가능. 전환 애니메이션/가드/분석 트래킹에 유용.

• useLinkStatus(): 하위 트리에서 네비게이션 pending 여부를 제공 → 링크 단위의 미세한 로딩 상태 구현에 적합.

5) TypeScript LSP 플러그인 성능

• 서버/클라이언트 경계 검증, 금지 API 점검 등 기능을 제공하는 Next.js TS 플러그인이 대규모 레포에서 ~60% 응답 개선, 프리징/크래시 없이 동작.

6) 그 외 변경(발췌)

• images.remotePatterns에 new URL() 지원, Viewport 옵션 분리, unstable_dynamicOnHover, Pinterest Rich Pins 지원.

• revalidate와 리다이렉트·Server Actions/Route Handlers의 일관성 개선, PNG→AVIF 변환 속도 향상을 위한 sharp 업그레이드 등.

---

Next.js 15.4 — 정리 (2025-07-14)

TL;DR

• Turbopack 빌드: next build --turbopack가 8298개 통합 테스트 100% 통과, vercel.com 프로덕션에 적용. 안정화 마일스톤.

• 안정성/성능: Next.js·Turbopack 전반에 다수의 안정성·성능 개선.

• Next.js 16 미리보기: cacheComponents(베타), Turbopack 빌드(베타), 라우팅 최적화, DevTools 강화, Node.js 미들웨어(안정), 배포 어댑터(알파), 일부 디프리케이션 등 예고.

핵심 변경 요약

1) Turbopack Builds

• 현황: 프로덕션 빌드용 통합 테스트 8298개 전부 통과, vercel.com 구동에 사용 중. 베타 표기 전 마지막 큰 분기점.

• 우선순위: 프로덕션 청킹 기반 번들 최적화 마무리, 알파 초기 사용자 제보 버그 수정.

• 권장: 이전에 시도했다가 보류했다면 다시 시도 권장(문제 발생 시 GitHub 이슈로 리포트).

next build --turbopack

2) Next.js 16 미리보기(프리뷰)

• Cache Components (beta): Dynamic IO·use cache·PPR을 단일 플래그로 통합해 캐싱 전략을 단순화.

• Turbopack Builds (beta): 통합 테스트 전부 통과, 고트래픽 사이트에서 검증 → 공개 베타 확대.

• 클라이언트 라우팅 최적화: 더 똑똑한 프리페치·캐시 무효화·대역폭 절감으로 탐색 반응성 향상.

• DevTools & 디버깅: Route Info로 앱 구조 인스펙션, loading.tsx 토글, 브라우저 로그 터미널 포워딩(AI 디버깅 워크플로 지원) 실험.

• Node.js Middleware (stable): 15.2에서 실험 도입된 Node 런타임 미들웨어를 안정화.

• Deployment Adapters (alpha): 커스텀 빌드/배포 타깃 제어를 위한 어댑터 API.

• 기타: Node.js 18 지원 중단, AMP 디프리케이트, 일부 next/image API 변경(마이그레이션 가이드 제공 예정).

지금 미리 써볼 수 있는 실험 플래그

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    browserDebugInfoInTerminal: true, // 브라우저 로그를 터미널로
    dynamicIO: true,                  // 16에서 cacheComponents로 개명 예정
    clientSegmentCache: true,         // 클라 라우터 개선
    devtoolSegmentExplorer: true,     // 라우트 컴포지션/오버라이드 탐색
    globalNotFound: true,             // 전역 404
    turbopackPersistentCaching: true, // Turbopack 지속 캐싱
  },
};

export default nextConfig;

3) Notable Changes 하이라이트

• 개선: 리디렉션 시 RSC query 보존, 봇 대상 우아한 에러 폴백, 클라 컴포넌트에서 unstable_rootParams 금지, bodySizeLimit/비-멀티파트 액션 오류 수정, 미지의 액션 ID에 404 응답, RSC 요청의 cache-busting 파라미터 체크, Vercel OG 0.7.2로 업그레이드, assert/strict 외부화, FlightRouterState 전송 전 searchParam 제거, 스트리밍 메타데이터 최상위 렌더링 등.

• Fix: 설정 모듈 변이 방지, staleTime 시드 프리페치 전파, vary 복구, React Compiler “interestingness/usefulness” 감지 개선, launchEditor 경로 엣지 케이스 처리, 정적 페이지 stale prefetch 폐기 등.

• Feature: router.prefetch에 onInvalidate, <Link prefetch="auto"> 별칭, global-not-found 메타데이터 지원, 오버레이/인디케이터에서 dev 서버 재시작, next build용 --debug-prerender, 서버 externals에 htmlrewriter, 인터셉트된 동적 라우트 부분적 프리렌더링.

• 성능: React Compiler 이전에 SWC 선검사, 정적 경로 생성 성능/파라미터 처리 개선.

• 기타: 개발 중 NEXT_CPU_PROF로 CPU 트레이스 캡처 가능.

---

Next.js 15.5 — 정리 (2025-08-18)

TL;DR

• Turbopack 빌드 (베타): next build --turbopack 베타. vercel.com·v0.app·nextjs.org에 적용, 배포/프리뷰 빌드 가속. 롤아웃 이후 누적 12억+ 요청 처리.

• Node.js 미들웨어 (안정화): 미들웨어에서 runtime: 'nodejs' 정식 지원. 16에서 기본값은 아니지만, 17부터 기본 채택을 검토 중.

• TypeScript 강화: Typed Routes(안정), Route Export Validation(새 구현), Route Props Helpers(전역 타입) + next typegen 추가.

• next lint 디프리케이션: 16에서 제거 예정. ESLint/Biome 중 선택하고 직접 CLI로 관리(codemode 제공).

• Next.js 16 대비 경고: legacyBehavior(Link), AMP, next/image의 quality 기본 75·localPatterns 규칙 등 변경 예고.

핵심 변경 요약

1) Turbopack 빌드 (베타)

• 현황: 베타 진입. vercel.com / v0.app / nextjs.org 프로덕션에 적용되어 미리보기·배포 빌드 속도 향상. 누적 1.2B+ 요청에서 실전 검증.

• 성능 관측: 멀티코어 활용 설계. 예) 4코어 2×, 14코어 2.2×, 30코어에서 10k/40k/70k 모듈 규모 각각 4× / 2.5× / 5× 빨라짐(내부 관측). 프로덕션 메트릭(FCP/LCP/TTFB)은 Webpack과 동등 혹은 더 좋음.

• 알려진 차이점(문서화됨):

  • 소규모/저코어: Webpack의 지속 캐시 탓에 체감 이득이 적을 수 있음 → Turbopack Persistent Caching 작업 중.

  • 번들 최적화: 일부 에지 케이스서 Webpack이 더 작은 번들 → 격차 해소 중.

  • CSS 순서: 부작용(사이드이펙트) 휴리스틱 차이에 따라 CSS 연결 순서 달라 시각차 가능. 가이드·우회책 제공.

실행:

next build --turbopack

(개발에서 Turbopack을 쓰고 있다면 빌드도 시도 권장.)

2) Node.js 미들웨어 (안정화)

이제 미들웨어에서 Node 전용 API/패키지를 직접 활용 가능. (15.2 실험 → 15.5 안정)

// middleware.ts
export const config = { runtime: 'nodejs' }; // ✅ stable

※ Next 16의 기본값은 여전히 Edge, Next 17부터 기본 채택 검토.

3) TypeScript 개선 (App Router 중심)

• Typed Routes (안정): 파일 구조 기반으로 라우트 타입 자동 생성 → <Link href="..."> 오타/잘못된 경로를 컴파일 타임에 차단.

// next.config.ts
export default { typedRoutes: true }; // ✅ stable

(Turbopack/webpack 양쪽에서 동작하도록 새 구현)

• Route Export Validation: Turbopack에서도 타입가드 파일 생성 + TS satisfies 기반 검증으로 dynamic 등 잘못된 export를 빌드 중 탐지. (이전 Webpack 플러그인 대체)

• Route Props Helpers: 전역 타입 PageProps / LayoutProps / RouteContext 제공. 동적/병렬 라우트까지 매개변수 완전 타이핑. 대규모 프로젝트에서도 효율적으로 소수의 최적화된 타입 파일만 생성.

• next typegen: next dev/build 없이 독립 타입 생성 → CI에서 tsc --noEmit와 결합해 외부 검증 가능.

next typegen && tsc --noEmit

4) next lint 디프리케이션 (→ 16에서 제거)

• 새 프로젝트는 ESLint(풍부한 규칙), Biome(빠름), 미설치 중 선택. ESLint 프로젝트는 eslint.config.mjs를 명시적으로 생성, 스크립트는 직접 CLI 호출로 통일.

• 마이그레이션 codemode:

npx @next/codemod@latest next-lint-to-eslint-cli .

• 참고: Next 16에선 next build의 자동 린트 실행도 제거 예정(빌드와 린트를 완전 분리).

5) Next.js 16 대비 디프리케이션 경고

• legacyBehavior (Link): 16에서 제거 → <Link> 내부 <a> 제거하고 현대식 사용으로 통일.

• AMP 지원: 16에서 완전 제거 → 관련 API/설정/훅(useAmp) 모두 정리.

• next/image 변경:

  • quality 기본 75 고정; 다른 값 사용 시 images.qualities로 명시 허용 필요.

  • 로컬 이미지 + 쿼리스트링은 images.localPatterns로 명시 허용 필요.

// next.config.ts
export default {
  images: {
    qualities: [75, 100],
    localPatterns: [
      { pathname: '/photo.jpg' },               // 쿼리 전부 허용
      { pathname: '/photo.jpg', search: '?v=1' }, // 특정 쿼리만 허용
      { pathname: '/assets/**', search: '' },     // 쿼리 금지
    ],
  },
};