Next.js 15가 React 19 stable을 기반으로 공식 출시되었습니다. 이 주요 업데이트는 안정적인 PPR(부분 사전 렌더링) 시스템, 개선된 캐싱 전략 및 개발 빌드를 위한 Turbopack 통합을 제공합니다.

이 문서에서는 새로운 주요 기능을 살펴보고 Next.js 14에서 마이그레이션하기 위한 단계별 업그레이드 가이드를 제공합니다.

1. 새로운 주요 기능

기본 React 19 지원

Next.js 15는 React 19를 완전히 수용합니다. 이제 서버 구성 요소가 안정적이며 use() 및 useOptimistic()과 같은 새로운 후크가 앱 라우터 내에서 직접 작동합니다. 또한 서버 작업은 작업 지향 후크의 성능이 향상되어 더욱 효율적입니다.

부분 사전 렌더링(PPR)이 안정화되었습니다.

이전에는 실험적이었던 PPR은 이제 생산 준비가 되었습니다. 이를 통해 동일한 페이지 내에서 동적 콘텐츠와 정적 콘텐츠를 혼합할 수 있습니다. 사용자별 데이터는 동적으로 렌더링되는 반면 공유 콘텐츠는 빌드 시 사전 렌더링됩니다. 이 하이브리드 접근 방식은 블로그 및 전자 상거래 사이트에 대한 LCP 및 FCP 측정항목을 직접적으로 향상시킵니다.

기본 개발 엔진인 Turbopack

Turbopack은 이제 새 프로젝트에서 next dev의 기본 번들러입니다. Rust로 작성되어 레거시 웹팩 기반 개발 서버에 비해 훨씬 빠른 HMR(핫 모듈 교체)을 제공합니다. 대규모 프로젝트에서는 속도 향상이 즉시 느껴집니다.

2. 업그레이드 단계

1단계: 종속성 업데이트

프로젝트 루트에서 다음을 실행합니다.

npm install next@15 react@19 react-dom@19

2단계: 더 이상 사용되지 않는 API 교체

버전 14의 여러 next.config.js 옵션이 변경되었습니다. 캐싱 구성에 세심한 주의를 기울이십시오. 보다 세밀한 캐시 제어를 위해 staleTimes 옵션이 확장되었습니다.

3단계: 내장 글꼴 시스템으로 마이그레이션

아직 @next/font 패키지를 사용하고 있다면 내장된 next/font로 전환하세요.

npm uninstall @next/font

대신 next/font을 참조하도록 코드의 모든 가져오기를 업데이트하세요.

3. 캐싱 전략 점검

Next.js 15에서 fetch의 기본 캐시 동작은 이제 no-store입니다. 이렇게 하면 의도하지 않은 오래된 데이터가 캐시에 남아 있는 것을 방지할 수 있습니다. 캐싱이 필요한 경우 cache: 'force-cache'를 명시적으로 전달하세요.

// Next.js 15 default: no cache
const data = await fetch('https://api.example.com/data');

// Explicitly opt into caching
const cachedData = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
});

요약

Next.js 15는 React 19 통합을 기반으로 성능과 개발자 경험 모두에서 상당한 도약을 나타냅니다. PPR이 안정화되고 Turbopack이 기본 개발 엔진으로 사용되므로 생산 채택이 그 어느 때보다 쉬워졌습니다. 새로운 캐싱 기본값에 주의하고 이에 따라 마이그레이션을 계획하세요.