2024년 10월, Next.js 15가 정식 릴리스(Stable)되었습니다. 이번 업데이트는 단순한 기능 추가를 넘어, 그동안 개발자들을 괴롭혔던 ‘캐싱의 복잡함’을 해결하고 **개발 경험(DX)**을 대폭 개선하는 데 초점이 맞춰져 있습니다.

프론트엔드 팀 리드로서, 프로덕션 환경 마이그레이션을 검토하며 분석한 Next.js 15의 핵심 변경 사항을 정리합니다.

1. Turbopack Dev: 드디어 ‘Stable’

Next.js 13부터 베타였던 Turbopack이 드디어 정식 버전(Stable)이 되었습니다. Rust로 작성된 이 번들러는 Webpack 대비 최대 700배 빠르다고 광고했었죠. 실제 체감은 어떨까요?

• Cold Start: 대규모 모노레포 프로젝트에서 npm run dev 실행 시, 기존 15초 걸리던 로딩이 2~3초로 줄었습니다.
• HMR (Hot Module Replacement): 코드를 저장하자마자 브라우저에 반영되는 속도가 눈에 띄게 빨라졌습니다. 이제 대기 시간 없이 코딩의 흐름을 유지할 수 있습니다.

# 이제 개발 서버 실행 시 --turbo 플래그를 붙여보세요
next dev --turbo

2. Async Request APIs (Breaking Change)

가장 주의해야 할 변경점입니다. headers, cookies, params, searchParams 같은 API들이 **비동기(Asynchronous)**로 바뀌었습니다.

이전 (Next.js 14)

// 동기적으로 접근 가능했음
const cookieStore = cookies();
const token = cookieStore.get('token');

변경 (Next.js 15)

// 반드시 await가 필요함
const cookieStore = await cookies();
const token = cookieStore.get('token');

이는 서버 컴포넌트가 렌더링될 때까지 요청(Request) 정보가 확정되지 않을 수 있는 엣지 런타임 환경 등을 고려한 조치입니다. 마이그레이션 시 가장 많은 에러를 뿜어내는 부분이므로 codemod를 적극 활용해야 합니다.

3. 캐싱 정책의 대전환: “Uncached by Default”

Next.js 14까지는 fetch 요청이 기본적으로 캐싱(Force-cache)되었습니다. 이로 인해 “왜 DB를 업데이트했는데 화면은 그대로죠?”라는 질문이 끊이지 않았습니다.

Next.js 15부터는 GET 요청도 기본적으로 캐싱되지 않습니다 (no-store). 캐싱을 원한다면 명시적으로 옵션을 줘야 합니다.

// 이제는 명시적으로 캐시 설정을 해야 함
fetch('https://api.example.com/data', { cache: 'force-cache' });

이는 “기본이 동적(Dynamic)“이라는 웹의 본질로 돌아간 합리적인 결정이라 생각합니다.

4. React 19 지원

Next.js 15는 React 19 RC(Release Candidate) 버전을 완벽하게 지원합니다.

• Actions: <form action={search}> 처럼 폼 처리를 위한 액션이 더 강력해졌습니다. useActionState 훅을 통해 로딩 상태와 에러 처리를 우아하게 할 수 있습니다.
• Compiler: React Compiler(베타)를 도입하여, useMemo나 useCallback을 수동으로 쓰지 않아도 자동으로 최적화가 수행됩니다.

5. 결론: 성숙해진 프레임워크

Next.js 15는 혁신적인 기능보다는 안정성과 예측 가능성에 무게를 두었습니다. 특히 제멋대로 동작하던 캐싱 정책이 직관적으로 바뀐 것만으로도 업데이트할 가치는 충분합니다.

지금 바로 마이그레이션을 시작하기엔 이르냐고요? Turbopack의 속도 하나만으로도 충분히 넘어갈 이유는 됩니다. 다만, 비동기 API 변경으로 인한 코드 수정 비용은 감안하시기 바랍니다.