Next.js 15 새 기능 총정리 — App Router 실전 마이그레이션 가이드
Next.js 15가 출시되면서 App Router가 더욱 안정화되었습니다. Turbopack 기본 활성화, Server Actions 개선, React 19 지원 등 핵심 변경 사항과 실전 마이그레이션 전략을 정리합니다.
[!SUMMARY] 핵심 요약: Next.js 15의 3대 핵심 변화 — (1) Turbopack 개발 서버 기본화로 HMR 속도 5배 향상, (2) React 19 공식 지원으로 use() 훅·Server Actions 안정화, (3) 비동기 API(cookies/headers/params)로 전환 필수. 마이그레이션은 자동화 코드모드(npx @next/codemod) 활용 권장.
Next.js 15, 무엇이 달라졌나?
Next.js 15는 2024년 10월 공식 출시된 메이저 버전입니다. Vercel 팀은 이번 릴리스에서 개발 경험(DX) 향상과 성능 최적화에 집중했습니다. 특히 Turbopack 개발 서버 안정화와 React 19 공식 지원이 가장 큰 변화입니다.
Turbopack — 개발 서버가 5배 빨라졌다
Next.js 15부터는 next dev만 실행해도 Turbopack이 자동 활성화됩니다. 벤치마크 결과(공식 발표): 로컬 서버 시작 최대 76.7% 빠름, 코드 업데이트(HMR) 최대 96.3% 빠름, 대규모 앱 초기 컴파일 평균 5배 이상 향상.
React 19 공식 지원 — use() 훅과 Server Actions
React 19와 함께 Server Actions가 안정 버전으로 전환되었습니다. use() 훅은 Promise나 Context를 직접 읽고 Suspense와 통합됩니다. Server Actions는 폼 제출, 데이터 뮤테이션 등 서버사이드에서 직접 DB 조작이 가능합니다.
비동기 API 전환 — 마이그레이션 필수 작업
| API | Next.js 14 | Next.js 15 |
|---|---|---|
| cookies() | 동기 호출 | await cookies() 필수 |
| headers() | 동기 호출 | await headers() 필수 |
| params | 동기 접근 | await params 필수 |
| searchParams | 동기 접근 | await searchParams 필수 |
마이그레이션 자동화: npx @next/codemod@canary upgrade latest 명령으로 cookies(), headers(), params, searchParams 비동기 전환을 자동 처리합니다.
캐싱 정책 변경 — 기본값이 바뀌었다
fetch() 캐싱 기본값 변경: Next.js 14는 cache: force-cache(기본 캐싱), Next.js 15는 cache: no-store(기본 캐싱 없음). Route Handlers도 GET 핸들러 기본 캐싱이 제거되었습니다.
관련 도구: 페이지 속도 분석기에서 Next.js 사이트의 Core Web Vitals를 측정해 보세요.
자주 묻는 질문 (FAQ)
Q1. Next.js 14에서 15로 업그레이드하면 기존 코드가 깨지나요?
A: 비동기 API 전환과 캐싱 기본값 변경이 브레이킹 체인지입니다. 자동 코드모드를 실행한 후 params, cookies(), headers() 사용 부분을 수동 확인하는 것을 권장합니다.
Q2. Pages Router 프로젝트는 Next.js 15에서도 동작하나요?
A: 네. Next.js 15는 Pages Router를 계속 지원합니다. App Router로 전환하지 않아도 됩니다.
Q3. Turbopack을 사용하면 webpack 플러그인이 작동하지 않나요?
A: 일부 webpack 전용 플러그인은 Turbopack과 호환되지 않습니다. next.config.ts에서 Turbopack을 비활성화하거나 호환 버전을 사용해야 합니다.
Q4. Server Actions는 언제 사용하고, API Route는 언제 사용하나요?
A: Server Actions는 폼 제출, 데이터 뮤테이션 등 Next.js 앱 내부에서만 호출되는 작업에 적합합니다. 외부 서비스가 호출해야 하는 엔드포인트는 API Route를 사용하세요.
Q5. React 19의 use() 훅과 useEffect의 차이는?
A: use() 훅은 Promise나 Context를 직접 읽고 Suspense와 통합됩니다. useEffect는 클라이언트 사이드에서 부수 효과를 처리합니다.
Q6. Next.js 15에서 TypeScript strict 모드 설정은 달라졌나요?
A: Next.js 15는 TypeScript 5.x를 지원하며 strict 설정은 이전과 동일합니다. 다만 비동기 API 전환으로 인해 타입 추론이 달라진 부분이 있으니 tsc --noEmit 검사를 반드시 실행하세요.
🔧 이 글과 관련된 무료 도구
이 글과 관련된 상품 (["Next.js")[광고/제휴]
이 포스팅은 쿠팡 파트너스, 아마존 어소시에이트, 알리익스프레스 제휴 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 이는 상품 가격에 영향을 주지 않습니다.
As an Amazon Associate, Coupang Partner, and AliExpress affiliate, I earn from qualifying purchases at no extra cost to you.