문서
App Router 사용하기
애플리케이션 구축하기
업그레이드
버전 15

버전 15

14에서 15로 업그레이드

Next.js 버전 15로 업데이트하려면 선호하는 패키지 관리자를 사용하여 다음 명령을 실행하세요:

Terminal
npm i next@rc react@rc react-dom@rc eslint-config-next@rc
Terminal
yarn add next@rc react@rc react-dom@rc eslint-config-next@rc
Terminal
pnpm up next@rc react@rc react-dom@rc eslint-config-next@rc
Terminal
bun add next@rc react@rc react-dom@rc eslint-config-next@rc

알아두면 좋은 점:

  • 상호 종속성 경고가 표시되면 제안된 버전으로 react와 react-dom을 업데이트하거나 --force 또는 --legacy-peer-deps 플래그를 사용하여 경고를 무시해야 할 수 있습니다. Next.js 15와 React 19가 모두 안정화되면 이는 필요하지 않을 것입니다.
  • TypeScript를 사용하고 있다면 React 타입을 일시적으로 재정의해야 할 수 있습니다. 자세한 내용은 React 19 RC 업그레이드 가이드를 참조하세요.

최소 React 버전

  • 이제 최소 react와 react-dom 버전은 19입니다.

fetch 요청

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

특정 fetch 요청을 캐싱하도록 설정하려면 cache: 'force-cache' 옵션을 전달할 수 있습니다.

app/layout.js
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 옵션을 지정하면 해당 옵션이 대신 사용됩니다.

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

라우트 핸들러

라우트 핸들러의 GET 함수는 더 이상 기본적으로 캐시되지 않습니다. GET 메서드를 캐싱하도록 설정하려면 라우트 핸들러 파일에서 export const dynamic = 'force-static'과 같은 라우트 구성 옵션을 사용할 수 있습니다.

app/api/route.js
export const dynamic = "force-static";
 
export async function GET() {}

클라이언트 측 라우터 캐시

<Link> 또는 useRouter를 통해 페이지 간 이동할 때 페이지 세그먼트는 더 이상 클라이언트 측 라우터 캐시에서 재사용되지 않습니다. 그러나 브라우저의 뒤로 가기 및 앞으로 가기 탐색과 공유 레이아웃에 대해서는 여전히 재사용됩니다.

페이지 세그먼트를 캐싱하도록 설정하려면 staleTimes 구성 옵션을 사용할 수 있습니다:

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

레이아웃과 로딩 상태는 여전히 캐시되고 탐색 시 재사용됩니다.

next/font

내장된 next/font를 선호하여 @next/font 패키지가 제거되었습니다. 임포트를 안전하고 자동으로 이름을 바꾸기 위한 코드모드가 제공됩니다.

app/layout.js
// 이전
import { Inter } from "@next/font/google";
 
// 이후
import { Inter } from "next/font/google";

bundlePagesRouterDependencies

experimental.bundlePagesExternals은 이제 안정화되었으며 bundlePagesRouterDependencies로 이름이 변경되었습니다.

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 이전
  experimental: {
    bundlePagesExternals: true,
  },
 
  // 이후
  bundlePagesRouterDependencies: true,
};
 
module.exports = nextConfig;

serverExternalPackages

experimental.serverComponentsExternalPackages는 이제 안정화되었으며 serverExternalPackages로 이름이 변경되었습니다.

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 이전
  experimental: {
    serverComponentsExternalPackages: ["package-name"],
  },
 
  // 이후
  serverExternalPackages: ["package-name"],
};
 
module.exports = nextConfig;

Speed Insights

Next.js 15에서 Speed Insights를 위한 자동 계측이 제거되었습니다.

Speed Insights를 계속 사용하려면 Vercel Speed Insights 퀵스타트 가이드를 따르세요.

Codemods버전 14