개요

Next.js가 버전 15가 출시되었다.

🚀 주요 변화 내용

1. 코드모드 CLI 도구의 등장

새로운 @next/codemod CLI 도구가 도입되었다.
하지만 여전히 그 신뢰성에 대한 의문이 있다.
next14의 codemod 는 제대로 동작하지 않는 느낌이었다.
페이지 라우터에서 앱 라우터로의 전w환이 얼마나 이루어질지 궁금하다.

2. 새로운 비동기 요청 API(중요)

핵심 변경사항:

1. 기존 방식의 문제점

   • 이전에는 요청 처리 방식이 복잡하고 예측하기 어려웠다
   • 자동 캐싱과 재검증(revalidation) 동작이 때로는 혼란을 야기했다 <- ㄹㅇ로

2. 주요 특징

   • Route Handler와 Server Component에서의 fetch는 더 예측 가능해졌다.
   • 기본적으로 모든 fetch 요청은 캐시되지 않는다.
   • Dynamic Functions (cookies(), headers() 등)을 사용할 때의 동작이 더 명확해졌다

3. 코드 예시:

// 과거의 유물
async function getData() {
  const res = await fetch('https://api.example.com/data')
  // 데이터는 과연 캐시되었을까?
  return res.json()
}
 
// 새로운 시대의 코드
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // 필요한 경우 명시적으로 캐시 설정
    next: { revalidate: 3600 } // 혹은 재검증 간격 설정
  })
  return res.json()
}

3. 캐싱 정책 전환

이제 더 이상 캐시는 자연스럽게 존재하지 않는다.
fetch 요청, GET Route Handlers, 클라이언트 네비게이션은 모두 선택을 요구한다.
성능 최적화를 위해 필요한 경우 명시적으로 캐시 설정을 추가해야 한다.
Dynamic Function 사용 시 렌더링 동작을 더 주의깊게 고려해야 한다.

개인적으로 next.js의 router 캐시는 핸들링하기 어렵고 복잡하게 되어있었는데

• 웹 및 모바일 환경에서 Next.js Router 사용 시 최신 데이터 반영 전략

이번 업데이트를 통해 명료해지는 것 같아 좋다.

4. React 19 지원: 새로운 시대의 서막

React 19의 지원은 다음과 같은 혁신을 수반한다:

• React Compiler (아직 실험실에서 연구 중)
  • useMemo, useCallback 안써도 자동적으로 최적화 해준다고한다.
    • eslint에서 의존성배열 문제가 지금도 발생하는데 어떻게 자동으로 해줄 수 있으려나
• 하이드레이션 오류의 정확한 처리
  • 의외로 중요할듯하다. 하이드레이션 오류는 잡기 어렵

5. Turbopack 개발 서버 안정화

무수한 시행착오 끝에 Turbopack이 마침내 실험실을 벗어나 정식 버전으로 승격되었다.
변경 내용은 전형적이다.

• 성능이 향상되었다.
• 안정성이 견고해졌다.

💡 개발자를 위한 새로운 도구들

정적 라우트 인디케이터

개발 중인 정적 라우트를 시각적으로 확인할 수 있게 되었다.

Form 컴포넌트의 진화

next/form을 통해 HTML 폼에 클라이언트 사이드 네비게이션 기능을 추가할 수 있게 되었다.
vercel에 따르면 사용자 경험을 크게 개선할 것으로 기대된다.

• 궁금하니까 써봐야겠다.

🛠 개발 환경의 개선

TypeScript 구성의 계몽

드디어 next.config.ts를 지원하게 되었다.
next 14에서도 여전히 mjs였는데 이건 매우 흥미롭다.

보안 강화

서버 액션은의 보안이 강화되었다.

• 추측할 수 없는 엔드포인트 생성
• 사용하지 않는 액션은 자연스럽게 제거된다.

성능의 최적화

• 빌드 시간 단축
• Fast Refresh 속도 개선
• 외부 패키지 번들링 옵션 추가

🔍 모니터링 및 관찰성

instrumentation.js API

서버의 수명 주기를 관찰할 수 있는 새로운 도구가 등장했다

• 써봐야 알 것 같다.

unstable_after API(실험적 기능)

스트리밍 응답이 완료된 후 코드를 실행할 수 있는 새로운 API가 도입되었다.

🌐 셀프 호스팅 개선

Cache-Control 헤더에 대한 세밀한 제어가 가능해졌다.

결론

Next.js 15는 개발자 경험, 성능, 보안이라는 주요 키워드에서 큰 진전을 이루었다.
다만 캐싱 정책의 큰 변화는 문제가 생길 여지가 크므로, 마이그레이션은 충분한 실험과 검증이 선행되어야 할 것이다.
캐싱 동작 변경의 상세 배경은 [[KnowledgeBase/Blog/Next.js의 캐싱 메커니즘]]에서, Next.js 전반적 흐름은 [[KnowledgeBase/Blog/웹 개발 트렌드의 순환적 진화 - PHP에서 Next.js까지]]에서 다룬다.