Next.js 15 출시, 무엇이 바뀌었을까?

Next.js 15 정식 버전이 공개되면서 개발자들이 일상적으로 작성하던 코드 패턴에 큰 변화가 생겼습니다. 가장 체감이 큰 변화는 요청 기반 API의 비동기화와 데이터 캐싱 기본값의 변경입니다. 이전 버전까지 당연하게 여겼던 동기식 호출이나 자동 캐시 동작이 달라진 만큼, 기존 프로젝트를 운영 중이거나 새로운 서비스를 준비하는 개발자라면 변경된 동작 방식을 명확히 짚고 넘어갈 필요가 있습니다.

fetch 기본 캐시 해제와 예측 가능한 데이터 흐름

Next.js 14까지는 fetch 요청이 별도 설정 없이도 빌드 시점이나 런타임에 기본적으로 캐시되었습니다. 빠른 응답 속도를 얻을 수 있다는 장점이 있었지만, 백엔드 데이터베이스의 변경 사항이 화면에 즉시 반영되지 않아 혼란을 겪는 개발자가 많았습니다.

Next.js 15부터는 이러한 기본값이 뒤집혔습니다. 이제 fetch 요청과 GET 라우트 핸들러는 캐시되지 않는 상태가 기본값입니다. 매 요청마다 최신 데이터를 가져오는 동작이 표준이 되었으므로, 응답 캐싱이 꼭 필요한 엔드포인트에만 명시적으로 옵션을 추가하면 됩니다.

비동기로 전환된 쿠키와 라우트 파라미터

서버 컴포넌트나 라우트 핸들러에서 다루던 cookies(), headers(), 그리고 페이지 props로 전달되던 params와 searchParams가 모두 비동기 Promise 형태로 전환되었습니다.

전통적인 서버 사이드 렌더링 방식에서는 요청 헤더나 쿠키가 완전히 도착할 때까지 서버가 전체 렌더링을 멈추고 대기해야 했습니다. Next.js 팀은 요청에 종속적인 데이터와 그렇지 않은 정적 컴포넌트를 분리해 서버가 미리 렌더링을 준비할 수 있도록 기반 구조를 개편했습니다. 이 최적화를 위해 요청 정보를 읽는 시점을 명시적인 비동기 호출로 바꾸었습니다.

Next.js 15에서 동적 라우트 매개변수와 쿠키를 읽는 표준 작성 방식입니다.

tsx

// Next.js 15
import { cookies } from 'next/headers';

type PageProps = {
  params: Promise<{ id: string }>;
};

export default async function PostPage({ params }: PageProps) {
  const { id } = await params;
  const cookieStore = await cookies();
  const token = cookieStore.get('token');

  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return <div>{post.title}</div>;
}

params와 cookies() 앞에 await를 붙여야 하며, 기존 동기 방식으로 프로퍼티에 직접 접근하면 콘솔 경고가 발생합니다. 클라이언트 컴포넌트에서 비동기 params를 다뤄야 한다면 React 19의 use 훅을 사용해 Promise를 풀어낼 수 있습니다.

개발 모드 터보팩 안정화와 설정 파일 개선

개발 서버 속도를 개선하기 위한 터보팩(Turbopack)이 개발 모드에서 정식 안정화 단계에 진입했습니다. 대규모 코드베이스에서도 페이지 이동과 핫 리로딩이 이전 웹팩 기반 개발 환경보다 훨씬 빠르게 반응합니다.

타입스크립트를 기본 언어로 사용하는 흐름에 맞춰 next.config.ts도 공식 지원합니다. 설정 객체에 타입 검사와 자동 완성이 적용되므로 오타로 인한 설정 오류를 사전에 방지할 수 있습니다. 클라이언트 사이드 내비게이션을 기본으로 지원하는 <Form> 컴포넌트도 새롭게 추가되어 검색 폼이나 필터 구현이 한결 간결해졌습니다.

도입 판단과 마이그레이션 가이드

신규 프로젝트를 시작한다면 망설이지 않고 Next.js 15를 선택해도 좋습니다. 캐시 기본값이 직관적으로 바뀌어 데이터 갱신 이슈를 디버깅하는 시간이 줄어들고, 최신 React 19 생태계 기능도 즉시 활용할 수 있기 때문입니다.

운영 중인 대규모 Next.js 14 프로젝트를 마이그레이션할 때는 단계적인 접근이 안전합니다. 요청 API 비동기 전환은 프로젝트 전반의 타입 정의와 유틸 함수에 영향을 줍니다. 공식 마이그레이션 도구인 @next/codemod를 실행해 자동 변환이 가능한 구문을 먼저 정리하고, 전역 캐시에 의존하던 핵심 API 호출에 cache: 'force-cache' 옵션이 필요한지 점검하는 순서로 작업을 진행하는 것을 권장합니다.

nenextjs.org

Next.js 15 Release Notes

Next.js 15 introduces React 19 support, caching improvements, a stable release for Turbopack in development, new APIs, and more.