Next.js 15

TMT

Next.js 15은 안정 버전으로 발표되었으며, 기존의 Release Candidate 1(RC1) 및 Release Candidate 2(RC2) 업데이트를 기반으로 안정성과 새로운 기능을 강화한 릴리스입니다.

1. @next/codemod CLI

Next.js 업그레이드를 자동화하기 위한 CLI 도구가 제공됩니다.

npx @next/codemod@canary upgrade latest 명령어를 사용해 코드베이스를 최신 버전으로 업그레이드할 수 있습니다.
codemod 도구는 종속성을 업데이트하고, 사용 가능한 코드를 변환하며 적용 과정을 안내합니다.

2. Async Request APIs (Breaking Change)

서버 요청 데이터(headers, cookies 등)에 의존하는 API가 비동기로 전환되었습니다.

변경 이유: 요청 데이터를 기다리지 않고 미리 준비할 수 있도록 최적화.
영향받는 API:
- cookies, headers, draftMode
- params 및 searchParams (e.g., layout.js, page.js 등)
이전 동작 복원: 개발/프로덕션에서 경고 메시지가 표시되며, codemod로 자동 변환 가능.

3. Caching Semantics 변경 (Breaking Change)

이전에는 캐시가 기본 활성화 상태였으나, 이제 캐시가 기본적으로 비활성화됩니다.

GET Route Handlers:
- 기본 캐싱 해제.
- dynamic: 'force-static'로 캐시 활성화 가능.
Client Router Cache:
- Page 컴포넌트의 기본 캐싱 비활성화.
- 이전 동작 유지 시 staleTimes 설정 추가 가능.

4. React 19 지원

Next.js 15는 React 19를 지원하며, React 18과도 호환됩니다.

App Router: React 19 RC 기반으로 작동.
Pages Router: React 18과 호환되며, 점진적 업그레이드 가능.
React 19 업그레이드 가이드와 codemod 도구 제공.

5. Turbopack Dev (Stable)

개발 속도 향상을 위한 Turbopack가 안정화되었습니다.

성능 향상:
- 로컬 서버 시작 최대 76.7% 빨라짐.
- Fast Refresh 최대 96.3% 개선.
- 초기 라우트 컴파일 최대 45.8% 빨라짐.

6. Static Indicator

개발 중 정적/동적 라우트를 시각적으로 표시하는 새 기능이 추가되었습니다.

목적: 각 페이지가 정적으로 렌더링되는지 쉽게 식별하여 최적화에 도움.

7. `unstable_after` API (Experimental)

응답 후 실행할 작업(로깅, 분석 등)을 예약할 수 있는 API.

사용 예시:

import { unstable_after as after } from 'next/server';
after(() => log());

8. `instrumentation.js` API (Stable)

서버 수명 주기 관찰을 위한 API가 안정화되었습니다.

Sentry와 협업: 서버 에러 맥락을 캡처하고 관찰 가능.

9. `<Form>` 컴포넌트

HTML 폼을 클라이언트 네비게이션 및 점진적 개선과 통합.

기능:
- 사전 로딩(prefetching)
- 클라이언트 사이드 네비게이션.
- 자바스크립트 없이도 작동.

10. next.config.ts 지원

next.config.ts에서 TypeScript를 지원합니다.

NextConfig 타입 제공: 자동 완성 및 타입 안전성 강화.

11. 서버 동작 개선

Cache-Control 헤더에 대한 제어 추가.
sharp 설치 필요 제거: 이미지 최적화 자동 지원.

12. 외부 패키지 번들링 (Stable)

앱 라우터에서 외부 패키지 번들링 기본 활성화.

특정 패키지를 번들링에서 제외하려면 serverExternalPackages 옵션 사용.

13. ESLint 9 지원

ESLint 8과 9 모두 지원.
업그레이드 과정에서 새로운 설정 형식 적용 지원.

14. 개발 및 빌드 성능 향상

서버 컴포넌트 HMR: Fetch 요청을 재사용해 개발 비용 절감.
정적 생성 최적화: 페이지 렌더링 작업 중복 제거로 빌드 시간 단축.

15. 주요 Breaking Changes

Node.js 최소 버전 18.18.0 필요.
next/image에서 squoosh 제거, 기본 sharp 사용.
runtime="experimental-edge" 제거 (runtime="edge"로 변경).
ssr: false 옵션 제거 (Server Components에서 next/dynamic 사용 시).