Next.js 15 변경점

 

Next.js가 15버전으로 변경되며 생기는 변경점과 현재 제 개발 스펙에 어떻게 적용할 수 있는지에 대해 기술합니다

 

업그레이드 방법

Next.js는 패키지 매니저별 쉽게 버전업이 가능합니다.

 

pnpm example

pnpm up next@rc react@rc react-dom@rc eslint-config-next@rc

 

변경점

1. React 버전

React와 React-dom은 이제 19버전입니다.

https://ghdev.tistory.com/15

React 19에 대하여

 

2. Fetch 요청

next.js fetch 요청은 기본적으로 더 이상 캐시되지 않습니다.

 

특정 fetch 요청을 캐시에 포함시키려면 cache: 'force-cache'옵션을 사용할 수 있습니다.

export default async function RootLayout() {
  const a = await fetch('https://...') // 캐시되지 않음
  const b = await fetch('https://...', { cache: 'force-cache' }) // 캐시됨
  // ...
}

 

 

레이아웃이나 페이지의 모든 fetch 요청을 캐시에 포함시키려면 export const fetchCache = 'default-cache' 을 사용할 수 있습니다. 개발 fetch 요청에 cache 옵션을 지정하지 않은 경우 해당 옵션이 적용됩니다.

 

// 이것이 루트 레이아웃이므로, 앱 내의 모든 fetch 요청은 자체 캐시 옵션을 설정하지 않는 한 캐시됩니다.
export const fetchCache = 'default-cache'
export default async function RootLayout() {
  const a = await fetch('https://...') // 캐시됨
  const b = await fetch('https://...', { cache: 'no-store' }) // 캐시되지 않음
  // ...
}

 

 

마찬가지로 Route Handlers의 GET 함수도 기본적으로 더 이상 캐시되지 않습니다.

GET 메서드를 캐시에 포함시키려면, Route Handler 파일에 route 설정 옵션인 export const dynamic = 'force-static'을 사용할 수 있습니다.

 

export const dynamic = 'force-static'
export async function GET() {}

 

3. 클라이언트 사이드 라우터 캐시

<Link> 또는 useRouter를 통해 페이지간 탐색할때 더이상 클라이언트 사이드 라우터 캐시에서 재사용되지 않습니다.

그러나 브라우저 뒤로가기 및 앞으로 가기 탐색과 공유 레이아웃에서는 여전히 재사용됩니다.

페이지 세그먼트를 캐시에 포함시키려면, staleTimes 설정 옵션을 사용할 수 있습니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}
module.exports = nextConfig

 

layout.tsx와 로딩 상태는 여전히 캐시되서 사용됩니다.

 

4. next/font

@next/font 패키지는 next/font 내장 패키지로 대체되었습니다.

 

그외 bundlePagesRouterDependencies 페이지 라우터 관련 옵션 변경점과

Speed Insights 등 Vercel 호스팅 사용자들만 해당되는 변경점들도 있습니다.

 

이번 Next.js 15는 리액트 19에 초점을 맞추어 업데이트되어 큰 변경점은 없고

Tanstack-query를 사용하다보니 fetch 관련 변경점들을 아직 활용해 볼수 없지만 Next.js의 Data Cache를 제대로 활용 해보고 싶은 마음이 커 상황에 맞게 적용해 볼수 있는 방법을 고려해보려고 합니다.