Next.js 15의 핵심 변경: Turbopack 안정화(개발 서버 속도 대폭 향상), Server Actions 개선, Partial Prerendering(정적+동적 혼합 렌더링), 캐싱 전략 변경(기본 no-cache).
Next.js 15 핵심 변경사항 총정리
Next.js 15의 주요 변경사항과 마이그레이션 가이드를 정리한다. Turbopack 안정화, 캐싱 전략 변경(기본 no-cache), PPR, React 19 통합과 async Request API 대응법을 포함한다.
한 줄 요약: Next.js 15는 Turbopack 안정화, 캐싱 전략 변경(기본 no-cache), Partial Prerendering(PPR), React 19 통합이 핵심이다.
Next.js 14에서 15로 마이그레이션하면 무엇이 달라지는지, 실전 프로젝트에서 주의할 점은 무엇인지 정리한다. 특히 캐싱 동작 변경은 기존 앱의 성능에 직접 영향을 미치므로 반드시 확인해야 한다.
주요 변경사항
Turbopack 안정화: next dev --turbopack이 안정 버전으로 올라갔다. 대규모 프로젝트에서 Webpack 대비 HMR(Hot Module Reload) 속도가 5~10배 빠르다. next.config.ts에서 experimental.turbo 설정 없이 바로 사용 가능하다.
캐싱 전략 변경: Next.js 14에서 fetch()는 기본적으로 캐시를 사용했지만, 15에서는 기본값이 no-cache로 변경됐다. 기존에 캐시에 의존하던 API 호출이 있다면, 명시적으로 cache: 'force-cache' 또는 next.revalidate를 설정해야 한다. 이 변경으로 인한 성능 저하가 가장 흔한 마이그레이션 이슈다.
캐싱 전략 변경 대응// Next.js 14 (자동 캐시) fetch('https://api.example.com/data') // Next.js 15 (명시적 캐시 필요) fetch('https://api.example.com/data', { next: { revalidate: 3600 } // 1시간 캐시 }) // 또는 route segment config export const revalidate = 3600;
마이그레이션 체크리스트
- 캐싱 동작 변경 확인 (fetch 기본값 변경)
- async Request API 대응 (cookies, headers 등)
- Turbopack으로 개발 서버 전환 테스트
- React 19 호환성 확인
async Request API: cookies(), headers(), params, searchParams가 모두 async로 변경됐다. const cookieStore = await cookies()처럼 await를 추가해야 한다. Codemod npx @next/codemod@canary upgrade latest로 대부분 자동 변환 가능하다.
실전 성능 개선 팁
Next.js 15에서 성능을 극대화하는 방법: PPR(Partial Prerendering) 활용, 이미지 최적화, 서버 컴포넌트 최대한 활용, 클라이언트 번들 최소화.
PPR(Partial Prerendering): 하나의 페이지에서 정적 부분은 빌드 시 생성하고, 동적 부분만 요청 시 스트리밍한다. 예를 들어 상품 페이지에서 제목/설명은 정적, 가격/재고는 동적으로 처리하면 TTFB가 크게 개선된다.
서버 컴포넌트 최적화: 클라이언트 번들에 포함되는 코드를 최소화하라. 'use client'를 가능한 한 리프(leaf) 컴포넌트에만 사용하고, 데이터 페칭은 서버 컴포넌트에서 처리한다. next build 후 .next/analyze로 번들 크기를 확인하라.
마이그레이션 팁:
npx @next/codemod@canary upgrade latest 명령으로 대부분의 breaking change를 자동 수정할 수 있다. 실행 후 수동으로 캐싱 전략만 점검하면 된다.nextjsreact프론트엔드업데이트마이그레이션